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!
Top comments (5)
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
you can create pull request to fix that
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?
yes.
github.com/heithemmoumni/strapi-st...
Thank you
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?