Build a blog with Svelte, Strapi, and Apollo

Blogging is excellent to let you share experiences, and Strapi is useful at helping you create your blog! So, I am pretty sure that you now understand what this post is about. Let's learn how to create a blog with your favorite tech: Strapi and Svelte.

The goal here is to be able to create a blog website using Strapi as the backend, Svelte for the frontend, and Apollo for requesting the Strapi API with GraphQL

The source code is available on GitHub: https://github.com/heithemmoumni/strapi-starter-svelte-blog.

Prerequisites

you'll need to have Strapi and Svelte installed on your computer, but don't worry, we are going to install these together!

Setup

Create a blog-strapi-svelte folder and get inside!

mkdir blog-strapi-svelte && cd blog-strapi-svelte

Let's create a new project using thecreate strapi-app package.

yarn create strapi-app backend --quickstart --no-run

Now, we need to install some plugins to enhance your app, let's install graphql plugin

yarn strapi install graphql

Once the installation is completed, you can finally run strapi dev and create your first Administrator

yarn start
// or
strapi dev

Nice! Now that Strapi is ready, you are going to create your Svelte application.

Create a Svelte frontend server by running the following command:

npx degit sveltejs/template-webpack frontend

Once the installation is over, you can start your frontend app to make sure everything went ok.

cd frontend && yarn start

Let's, install some dependencies like Apollo to query Strapi with GraphQL

Apollo setup

yarn add svelte-apollo graphql apollo-client apollo-link apollo-link-http 
apollo-cache-inmemory graphql-tag

Create a svelte-apollo.js file inside your src folder containing the following code:

import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
const httpLink = createHttpLink({
    // You should use an absolute URL here
    uri: "http://localhost:1337/graphql",
});
// Cache implementation
const cache = new InMemoryCache();
// Create an Apollo client and pass it to all child components
// (uses svelte's built-in context)
const apolloClient = new ApolloClient({
    link: httpLink,
    cache,
});
export default apolloClient;

Import SvelteApollo and the apolloClient you created in your Svlete app by adding the following code in your app.svelte:

<script>
import apolloClient from "./svelte-apollo";
import { setClient } from "svelte-apollo";


setClient(apolloClient);
// ...

Great, apollo is ready now!
Let's create a new component inside our App.svelte component called ArticlesList.svelte and display your articles from Strapi now!

<script>
import apolloClient from "./svelte-apollo";
import { setClient, getClient, query } from "svelte-apollo";
import { GET_ARTICLES } from "./query.js";
setClient(apolloClient);

Get the Apollo client from context

const client = getClient();

Then, execute the GET_ARTICLES graphql query using Apollo client, that returns a svelte store of promises that resolve as values come in

const articles = query(client, { query: GET_ARTICLES });

create a query GET_ARTICLES

import gql from "graphql-tag";

export const GET_ARTICLES = gql`
  {
    articles {
      id
      title
      content
      image {
        url
      }
    }
  }
`;

ArticlesList.svelte file containing the following code:
Here we are using $articles (note the "$"), to subscribe to query values

<script>
  import apolloClient from "./svelte-apollo";
  import { setClient, getClient, query } from "svelte-apollo";
  import { GET_ARTICLES } from "./query.js";

  setClient(apolloClient);

  const client = getClient();
  const articles = query(client, { query: GET_ARTICLES });

</script>

<style>
// ..
</style>

  <h1>Strapi Blog</h1>
  <div>
    {#await $articles}
      <div>Loading...</div>
    {:then result}
      {#each result.data.articles as article (article.id)}
        <div>
          <img src={article.image.url} alt="" height="100" />
          <div>{article.title}</div>
          <p id="title" class="uk-text-large">{article.content}</p>
        </div>
      {:else}
        <div>No articles found</div>
      {/each}
    {:catch error}
      <div>Error loading articles: {error}</div>
    {/await}
  </div>

We are using the api_url in order to display images from Strapi

Conclusion

huge congratulations, you are finished this article! thank you!

Comments

[Joseph Pollone]

Hi, just a small addition after

yarn create strapi-app backend --quickstart --no-run

Be sure to

cd backend

in order to run

yarn strapi install graphql

[Heithem Moumni]

you can create pull request to fix that

[Joseph Pollone]

Oh, right! Not used to actually contributing in this way but I’ll take care of it.

Apologies, Heithem. I don’t see this article referenced in the GitHub repo. Can you point me to the proper repo?

[Heithem Moumni]

yes.
github.com/heithemmoumni/strapi-st...
Thank you

[Richard Wood]

Just looking into a Svelte/Strapi stack combination for a project. I see Svelte gives you the REST endpoints and GraphQl is an additional plugin.
So is it just adding complications using Strapi Graphql plugin and then bringing in Apollo to talk to it?
Did you gain much by doing that?