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

时间:2018-01-15 00:21:05

标签: javascript reactjs graphql contentful gatsby

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

我希望以编程方式创建基于内容数据的页面。在这种情况下,数据类型是零售店"商店"在/ retail_store_name

的gatsby页面

每个商店的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. 查询内容 - 我不知道这应该发生在哪里。我有一个模板文件,它是从内容数据创建的每个商店网页的模型。

  4. 如前所述,这只是传入道具的一些组件。例如:

    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中发布新商店以在生产站点上进行更新。

1 个答案:

答案 0 :(得分:6)

您可以在构建时动态创建页面,为此,您需要向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是Gatsby Node API函数,您可以在文档here中找到完整列表。

对于查询allContentfulStore,它被称为,因为您的contentType名称为store,gatsby查询将为allContentful {ContentTypeName}。

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

我希望这能回答你的问题。 干杯, 物语