Gatsby 入门
¥Getting Started with Gatsby
Strapi 文档团队专注于改进 Strapi 5 核心体验的文档。我们将在未来 6 个月内发布许多更改，请密切关注👀。
¥The Strapi Documentation team focuses on improving the documentation for Strapi 5's core experience. We will release many changes in the next 6 months, so please keep an eye out 👀.
因此，当前页面现在仅处于维护模式，可能未完全与 Strapi 5 保持同步，并且很快将从 docs.strapi.io 中删除并移至 Strapi 的 集成页面。
¥As a result, the present page is now in maintenance mode only, might not be fully up-to-date with Strapi 5, and will soon be removed from docs.strapi.io and moved to Strapi's integrations page.
同时，如果你想帮助我们改进此页面，请随时 contribute 到文档的 GitHub 存储库。
¥In the meantime, if you want to help us improve this page, please feel free to contribute to the documentation's GitHub repository.
本集成指南遵循 快速入门指南。你应该能够通过浏览 URL http://localhost:1337/api/restaurants 使用该 API。
¥This integration guide follows the Quick Start Guide. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.
如果你尚未阅读快速入门指南，则使用 Gatsby 请求 Strapi API 的方式将保持不变，只是你不获取相同的内容。
¥If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Gatsby remains the same except that you do not fetch the same content.
创建 Gatsby 应用
¥Create a Gatsby app
使用 Gatsby 命令行接口 创建一个基本的 Gatsby 应用。
¥Create a basic Gatsby application using the Gatsby CLI.
gatsby new gatsby-app
配置 Gatsby
¥Configure Gatsby
Gatsby 是 静态站点生成器，将在构建时从 Strapi 获取你的内容。你需要配置 Gatsby 才能与你的 Strapi 应用进行通信。
¥Gatsby is a Static Site Generator and will fetch your content from Strapi at build time. You need to configure Gatsby to communicate with your Strapi application.
yarn add gatsby-source-strapi
-
将
gatsby-source-strapi添加到gatsby-config.js文件的插件部分：¥Add the
gatsby-source-strapito the plugins section in thegatsby-config.jsfile:
{
resolve: "gatsby-source-strapi",
options: {
apiURL: "http://localhost:1337",
collectionTypes: [
"restaurant",
"category",
],
queryLimit: 1000,
},
},
GET 请求你的集合类型
¥GET Request your collection type
对 restaurant 集合类型执行 GET 请求以获取所有餐厅。
¥Execute a GET request on the restaurant collection type in order to fetch all your restaurants.
确保你激活了 restaurant 集合类型的 find 权限。
¥Be sure that you activated the find permission for the restaurant collection type.
query {
allStrapiRestaurant {
edges {
node {
data {
id
attributes {
name
description
}
}
}
}
}
}
{
"data": {
"allStrapiRestaurant": {
"edges": [
{
"node": {
"data":[
{
"id": 1,
{
"attributes": {
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
}
}
}
]
}
}
]
}
}
}
示例
¥Example
./src/pages/index.js
import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
const query = graphql`
query {
allStrapiRestaurant {
edges {
node {
data {
id
attributes {
name
description
}
}
}
}
}
}
`;
const IndexPage = () => (
<StaticQuery
query={query}
render={data => (
<ul>
{data.allStrapiRestaurant.edges[0].node.data.map(restaurant => (
<li key={restaurant.id}>{restaurant.attributes.name}</li>
))}
</ul>
)}
/>
);
export default IndexPage;
对 category 集合类型执行 GET 请求，以获取具有所有关联餐厅的特定类别。
¥Execute a GET request on the category collection type in order to fetch a specific category with all the associated restaurants.
确保你激活了 category 集合类型的 findOne 权限。
¥Be sure that you activated the findOne permission for the category collection type.
query {
strapiCategory(data: { elemMatch: { id: { eq: 1 } } }) {
data {
id
attributes {
name
restaurants {
name
description
}
}
}
}
}
{
"data": {
"strapiCategory": {
"data": [
{
"id": 1,
"attributes": {
"name": "French Food",
"restaurants": [
{
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
}
]
}
}
]
}
},
"extensions": {}
}
示例
¥Example
./src/pages/index.js
import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
const query = graphql`
query {
strapiCategory(data: { elemMatch: { id: { eq: 1 } } }) {
data {
id
attributes {
name
restaurants {
id
name
description
}
}
}
}
}
`;
const IndexPage = () => (
<StaticQuery
query={query}
render={data => (
<div>
<h1>{data.strapiCategory.data[0].attributes.name}</h1>
<ul>
{data.strapiCategory.data[0].attributes.restaurants.map(restaurant => (
<li key={restaurant.id}>{restaurant.name}</li>
))}
</ul>
</div>
)}
/>
);
export default IndexPage;
我们可以为每个类别生成页面。
¥We can generate pages for each category.
-
通过使用以下内容更新
gatsby-node.js文件，告诉 Gatsby 为每个类别生成一个页面：¥Tell Gatsby to generate a page for each category by updating the
gatsby-node.jsfile with the following:
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;
const result = await graphql(
`
{
categories: allStrapiCategory {
edges {
node {
name
}
}
}
}
`
);
if (result.errors) {
throw result.errors;
}
// Create blog articles pages.
const categories = result.data.categories.edges;
const CategoryTemplate = require.resolve('./src/templates/category.js');
categories.forEach((category, index) => {
createPage({
path: `/category/${category.node.name}`,
component: CategoryTemplate,
context: {
name: category.node.name,
},
});
});
};
-
创建一个
./src/templates/category.js文件，该文件将显示每个类别的内容：¥Create a
./src/templates/category.jsfile that will display the content of each one of your category:
import React from 'react';
import { graphql } from 'gatsby';
export const query = graphql`
query Category($name: String!) {
category: strapiCategory(name: { eq: $name }) {
name
restaurants {
id
name
}
}
}
`;
const Category = ({ data }) => {
const restaurants = data.category.restaurants;
const category = data.category.name;
return (
<div>
<h1>{category}</h1>
<ul>
{restaurants.map(restaurant => {
return <li key={restaurant.id}>{restaurant.name}</li>;
})}
</ul>
</div>
);
};
export default Category;
你可以通过浏览 http://localhost:8000/category/<name-of-category> 找到你的餐厅类别。
¥You can find your restaurant categories by browsing http://localhost:8000/category/<name-of-category>.