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

Posted 2023-03-08

【中文标题】以编程方式从内容数据创建 Gatsby 页面

【英文标题】：Programmatically create Gatsby pages from Contentful data

【发布时间】：2018-06-23 15:26:41

【问题描述】：

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

我希望基于内容数据以编程方式创建页面。在这种情况下，数据类型是一个零售“商店”，其 gatsby 页面位于 /retail_store_name

每个商店的 index.js 基本上是几个带有 props 的 react 组件，例如商店名称和 Google 地点 ID。

将数据添加到内容。这是我的示例数据模型：

    "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
        

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

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

查询内容 - 我不确定这应该发生在哪里。我有一个模板文件，该文件将作为从内容数据创建的每个商店网页的模型。

如前所述，这只是一些传入 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 中发布新商店以在生产站点上更新。

【参考方案1】：

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

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 查询将是 allContentfulContentTypeName。

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

我希望这能回答您的问题。 干杯， 哈立德

【讨论】：

运行时获取GraphQLError: Syntax Error GraphQL request (16:6) Expected Name, found <EOF>。有什么原因吗？

尝试删除 .cache 和 public 文件夹，您也可以在 GrapiQL 服务器中检查 gatsby 在您的开发版本中生成的查询，它应该是 localhost:port/___grapql 也许 ContentType 的命名不同而不是存储

@KhaledGarbaya ，您的 YouTube 视频真的很棒！谢谢您的帮助。非常感谢。