DEV Community

Heithem Moumni
Heithem Moumni

Posted on

Build a blog with Svelte, Strapi, and Apollo

#strapi #svelte #graphql #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
Enter fullscreen mode Exit fullscreen mode

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

yarn create strapi-app backend --quickstart --no-run
Enter fullscreen mode Exit fullscreen mode

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

yarn strapi install graphql
Enter fullscreen mode Exit fullscreen mode

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

yarn start
// or
strapi dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

cd frontend && yarn start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
// ...
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Get the Apollo client from context

const client = getClient();
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

create a query GET_ARTICLES

import gql from "graphql-tag";

export const GET_ARTICLES = gql`
  {
    articles {
      id
      title
      content
      image {
        url
      }
    }
  }
`;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Conclusion

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

Top comments (5)

Collapse
 
jpollone profile image
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

Collapse
 
heithemmoumni profile image
Heithem Moumni •

you can create pull request to fix that

Collapse
 
jpollone profile image
Joseph Pollone • • Edited

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?

Thread Thread
 
heithemmoumni profile image
Heithem Moumni • • Edited

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

Collapse
 
rwoodnz profile image
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?

Read next

codewander profile image

WIP Notes working though Render hosting Flask + Vite + React + Wouter

Kanishka -

alwalxed profile image

Context Dump: Simplifying AI File Preparation

Awa -

rijultp profile image

Enhancing User Experience with React-Joyride: How I made User onboarding seamless

Rijul Rajesh -

anil_rai_91969ccac2a4338a profile image

Just Joined the Community – Lots of Questions as a Fresher React Developer

Anil Rai -