Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 12, 2020 12:35 am GMT

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// orstrapi 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 implementationconst 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!


Original Link: https://dev.to/heithemmoumni/build-a-blog-with-svelte-strapi-and-apollo-2ad5

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To