“无法读取未定义的属性“node”-Gatsby/GraphQL/Prismic

Question

我正在使用gatsby的“gatsby source prismic graphql”插件将我的prismic repo与一个组件连接起来，并将博客帖子数据显示为一张卡片。该查询在GraphiQL中运行良好，但当我将GraphQL查询实现到组件中时，Gatsby无法识别查询中的“Prismic”。

我尝试过显示其他数据，如站点元数据，这是没有问题的

以下是Git回购协议：https://github.com/ENEIV/PrometheusIgnis

gatsby-config.js

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

组件查询数据从棱镜

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

那是因为你错过了“allArticless”（allArticles，不是吗？）RichText render中的对象{RichText.render（data.prismic.allArticles.edges.node.article\u title）}。

顺便说一下，我想你已经得到了一个多个边的数组，不是吗？使用allArticless，您有多个页面，因此如果上述解决方案不起作用，请尝试映射您的结果

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