使用 gatsby 和内容的 CreatePage API 问题

Question

我正在尝试使用来自内容的数据生成单个团队成员的页面。使用内容数据创建页面是次要的，我主要担心的是 gatsby-node.js 文件无法使用 /${node.slug}

创建页面

这是 gatsby-node.js 文件

exports.createPages = async ({ graphql, actions, reporter }) => {
  const result = await graphql(`
     {
      allContentfulIndividualTeamMember {
        nodes {
          slug
        }
      }
    }
  `);
  if (result.error) {
    reporter.panic("error loading data", JSON.stringify(result.errors))
  }
  result.data.allContentfulIndividualTeamMember.nodes.forEach(node => {
    actions.createPage({
      path: `/${node.slug}`,
      component: require.resolve("./src/Templates/individualTeamPage.js"),
      context: {
        slug: node.slug,
      },
    })
  })
}

这是我的个人团队成员模板文件

import React from "react"
import { graphql } from "gatsby"
const IndividualTeamPage = ({ data }) => {
  console.log("checking ")
  return (
    <div>
      <h1>Checking</h1>
      <p>{data.edges.node.nameOfTheEmployee} </p>
    </div>
  )
}

export default IndividualTeamPage
export const query = graphql(`
  query($slug: String!) {
    allContentfulIndividualTeamMember(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          positionInTheCompany
          nameOfTheEmployee
        }
      }
    }
  }
`)

更新： 我认为问题是由于我将 gatsby 中的 pages 文件夹更改为 Pages 引起的，我改回 pages 并删除并安装了 node_modules。我仍然无法以编程方式创建页面，如果它有帮助 [成功运行页面查询 - 0.035s - 3/3] 每当我运行 gatsby develop 时，我都会在终端中得到这个

Answer 1

Looks like it's graphql`<Content>` not graphql(`<Content`)>

Answer 2

您确定要使用该查询从 Contentful 检索值吗？我的猜测是：

  const result = graphql(`
    query {
      allContentfulIndividualTeamMember { 
       edges {
          node {
            slug
          }
        }
      } 
    }   
`)

注意edges 对象和node（而不是节点s）。

所以你的循环对象是：result.data.allContentfulIndividualTeamMember.edges.node.forEach()