Build a blog with Svelte, Strapi, and Apollo
Tags: strapi, svelte, graphql, apollo
Published: 2020-05-12 00:35:00

---
title: Build a blog with Svelte, Strapi, and Apollo
published: true
description: Creating a blog website using Strapi as the backend, Svelte for the frontend, and Apollo for requesting the Strapi API with GraphQL
tags: 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!
```js
mkdir blog-strapi-svelte && cd blog-strapi-svelte
```
Let's create a new project using thecreate strapi-app package.
```js
yarn create strapi-app backend --quickstart --no-run
```
Now, we need to install some plugins to enhance your app, let's install  graphql plugin
```js
yarn strapi install graphql
```
Once the installation is completed, you can finally run strapi dev and create your first Administrator
```js
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:
```js
npx degit sveltejs/template-webpack frontend
```
Once the installation is over, you can start your frontend app to make sure everything went ok.
```js
cd frontend && yarn start
```
Let's, install some dependencies like Apollo to query Strapi with GraphQL

## Apollo setup
```js
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:
```js
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:
```js
<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!
```js
<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
```js
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
```js
const articles = query(client, { query: GET_ARTICLES });
```
create a query GET_ARTICLES
```js
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
```js
<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!