以编程方式从Contentful数据创建Gatsby页面

Question

我正在寻找GatsbyJS和Contentful的帮助.文档并没有给我足够的信息.

我期待以编程方式创建基于内容数据的页面.在这种情况下,数据类型是零售"商店",其中gatsby页面位于/ retail_store_name

每个商店的index.js基本上是一些反应组件,其中传递了道具,例如商店名称和谷歌地方ID.

1. 将数据添加到内容.这是我的示例数据模型:

   {
       "name": "Store"
       "displayField": "shopName",
       "fields": [
           {
               "id": "shopName",
               "name": "Shop Name",
               "type": "Symbol",
               "localized": false,
               "required": true,
               "validations": [
                   {
                   "unique": true
                   }
               ],
               "disabled": false,
               "omitted": false
               },
               {
               "id": "placeId",
               "name": "Place ID",
               "type": "Symbol",
               "localized": false,
               "required": true,
               "validations": [
                   {
                   "unique": true
                   }
               ],
               "disabled": false,
               "omitted": false
           }
   }
   

2. 我已将内容丰富的站点数据添加到gatsby-config.js

   // In gatsby-config.js
   plugins: [
       {
           resolve: `gatsby-source-contentful`,
           options: {
           spaceId: `your_space_id`,
           accessToken: `your_access_token`
           },
       },
   ];
   

3. 查询满意 - 我不确定这应该发生在哪里.我有一个模板文件,它将成为从内容数据创建的每个商店网页的模型.

如上所述,这只是传递了props的一些组件.示例:

import React, { Component } from "react";

export default class IndexPage extends Component {
constructor(props) {
    super(props);
    this.state = {
        placeId: "",
        shopName: "",
    };
}
render (){
    return (
        <ComponentExampleOne shopName={this.state.shopName} />
        <ComponentExampleTwo placeId={this.state.placeId} />
    );
}

我真的不知道该怎么做.最终目标是为非技术用户自动发布,他们在Contentful中发布新商店以在生产站点上进行更新.

Answer 1

您可以在构建时动态创建页面,为此,您需要向gatsby-node.js文件添加一些逻辑.这是一个简单的片段.

const path = require('path')

exports.createPages = ({graphql, boundActionCreators}) => {
  const {createPage} = boundActionCreators
  return new Promise((resolve, reject) => {
    const storeTemplate = path.resolve('src/templates/store.js')
    resolve(
      graphql(`
        {
          allContentfulStore (limit:100) {
            edges {
              node {
                id
                name
                slug
              }
            }
          }
        }
      `).then((result) => {
        if (result.errors) {
          reject(result.errors)
        }
        result.data.allContentfulStore.edges.forEach((edge) => {
          createPage ({
            path: edge.node.slug,
            component: storeTemplate,
            context: {
              slug: edge.node.slug
            }
          })
        })
        return
      })
    )
  })
}

在createPages已导出的是你能找到的文档的完整列表中的盖茨比节点API函数在这里.

对于查询,allContentfulStore它被调用,因为你的contentType名称是storegatsby查询将是allContentful {ContentTypeName}.

最后,我创建了一个YouTube视频系列,解释了如何使用Contentful构建Gatsby网站.你可以在这里找到它

我希望这能回答你的问题.干杯,哈立德