使用 Svelte、Strapi 和 Apollo 构建博客
博客是分享经验的绝佳方式，而 Strapi 则能帮助你轻松创建博客！所以，我相信你现在应该明白这篇文章的主题了。接下来，让我们学习如何使用你最喜欢的技术：Strapi 和 Svelte 来创建博客。
本文的目标是创建一个博客网站，后端使用 Strapi，前端使用 Svelte，前端使用 Apollo 通过 GraphQL 请求 Strapi API。
源代码可在 GitHub 上找到：https://github.com/heithemmoumni/strapi-starter-svelte-blog。
先决条件
你需要在电脑上安装 Strapi 和 Svelte，不过别担心，我们会一起安装的！
设置
创建一个名为 blog-strapi-svelte 的文件夹并进入其中！
mkdir blog-strapi-svelte && cd blog-strapi-svelte
让我们使用 create strapi-app 包创建一个新项目。
yarn create strapi-app backend --quickstart --no-run
现在，我们需要安装一些插件来增强您的应用程序，让我们安装 GraphQL 插件。
yarn strapi install graphql
安装完成后，您就可以运行 strapi dev 并创建您的第一个管理员帐户了。
yarn start
// or
strapi dev
太棒了！既然Strapi已经准备就绪，接下来你要创建Svelte应用程序了。
运行以下命令创建 Svelte 前端服务器：
npx degit sveltejs/template-webpack frontend
安装完成后，您可以启动前端应用程序，以确保一切正常。
cd frontend && yarn start
让我们安装一些依赖项，例如 Apollo，以便使用 GraphQL 查询 Strapi。
阿波罗计划
yarn add svelte-apollo graphql apollo-client apollo-link apollo-link-http
apollo-cache-inmemory graphql-tag
在 src 文件夹内创建一个名为 svelte-apollo.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;
通过在 app.svelte 文件中添加以下代码，将 SvelteApollo 和您在 Svelte 应用中创建的 apolloClient 导入到您的 svelte 应用中：
<script>
import apolloClient from "./svelte-apollo";
import { setClient } from "svelte-apollo";
setClient(apolloClient);
// ...
太好了，Apollo 已经准备就绪！
让我们在 App.svelte 组件中创建一个名为 ArticlesList.svelte 的新组件，现在就可以显示来自 Strapi 的文章了！
<script>
import apolloClient from "./svelte-apollo";
import { setClient, getClient, query } from "svelte-apollo";
import { GET_ARTICLES } from "./query.js";
setClient(apolloClient);
从上下文中获取 Apollo 客户端
const client = getClient();
然后，使用 Apollo 客户端执行 GET_ARTICLES GraphQL 查询，该查询返回一个 Svelte 存储的 Promise，这些 Promise 会在接收到值时解析。
const articles = query(client, { query: GET_ARTICLES });
创建查询 GET_ARTICLES
import gql from "graphql-tag";
export const GET_ARTICLES = gql`
{
articles {
id
title
content
image {
url
}
}
}
`;
ArticlesList.svelte 文件包含以下代码：
这里我们使用 $articles（注意“$”）来订阅查询值。
<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>
我们使用 api_url 来显示来自 Strapi 的图像。
结论
恭喜你，你已经完成了这篇文章！谢谢！
文章来源：https://dev.to/heithemmoumni/build-a-blog-with-svelte-strapi-and-apollo-2ad5