"Cannot read property 'node' of undefined" - Gatsby/GraphQL/Prismic

Question

我正在使用 Gatsby 的 "gatsby-source-prismic-graphql" 插件将我的 Prismic 存储库与组件连接起来，并将博客 post 数据显示为卡片。该查询在 GraphiQL 中运行良好，但是当我将 GraphQL 查询实现到组件中时，Gatsby 无法识别我的查询中的 "Prismic"。

我试过显示网站元数据等其他数据，没有问题

这是 Git 存储库：https://github.com/ENEIV/PrometheusIgnis

盖茨比-config.js

// Prismic CMS
    {
      resolve: `gatsby-source-prismic-graphql`,
      options: {
        repositoryName: `prometheus`,
        accessToken: process.env.PRISMIC_KEY,
    },

组件从 Prismic 查询数据

import React from "react"
import { RichText } from "prismic-reactjs"
import { StaticQuery, graphql } from "gatsby"

const articlesQuery = graphql`
  query {
    prismic {
      allArticless(uid: "prometheus-prismic-testing-1") {
        edges {
          node {
            article_title
          }
        }
      }
    }
  }
`

const Posts = () => (
  // const doc = data.prismic.allArticless.edges.slice(0, 1).pop()
  // if (!doc) return null
  <StaticQuery
    query={articlesQuery}
    render={data => (
      <h1>{RichText.render(data.prismic.edges.node.article_title)}</h1>
    )}
  />
)

export default Posts

Answer 1

那是因为您在 RichText 渲染中缺少 'allArticless'（allArticles，不是吗？）对象 {RichText.render(data.prismic.allArticles.edges.node.article_title)}。

顺便说一句，我想你在边上得到了多个结果的数组，不是吗？使用 allArticless 你有多个页面，所以如果上面的解决方案不起作用，请尝试映射你的结果

data => { data.prismic.edges.map((article, index) => (
   <h1 key={`articleTitle-${index}}>{RichText.render(article.article_title)}</h1>
)}

Answer 2

使用“全部...”通过 GraphQL 从 CMS 提取数据与使用查询详细信息的单个名称提取数据之间存在很大差异。而且在调用多条数据的时候，最好用一个map方法（map函数）拉取所有需要的数据。

例如：

data => { data.prismic.edges.map((article, index) => (<h1 key={`articleTitle-${index}}>{RichText.render(article.article_title)}</h1>)}

正如 Logan 刚刚解决的那样。

"Cannot read property 'node' of undefined" - Gatsby/GraphQL/Prismic

"Cannot read property 'node' of undefined" - Gatsby/GraphQL/Prismic

reactjs

graphql

gatsby

graphql-js

prismic.io