“无法读取未定义的属性‘节点’” - Gatsby/GraphQL/Prismic

Posted 2023-03-08

【中文标题】“无法读取未定义的属性‘节点’” - Gatsby/GraphQL/Prismic

【英文标题】："Cannot read property 'node' of undefined" - Gatsby/GraphQL/Prismic

【发布时间】：2020-01-01 05:04:37

【问题描述】：

我正在使用来自 Gatsby 的“gatsby-source-prismic-graphql”插件将我的 Prismic 存储库与一个组件连接起来，并将博客文章数据显示为一张卡片。该查询在 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,
    ,

组件从 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

【参考方案1】：

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

顺便说一句，我认为您在边上有多个结果数组，不是吗？使用 allArticless 您有多个页面，因此如果上述解决方案不起作用，请尝试映射您的结果

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

【讨论】：

哇--。感谢洛根的帮助。该代码有效，但 RichText.render 在浏览器中引发警告“文本参数应该是一个数组”并且不呈现文本，但“article_title”是一个数组。 _来自 GraphiQL "node": "article_title": [ "type": "heading3", "text": "Prometheus Test #3", "spans": [] ]

【参考方案2】：

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

例如：

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

因为 Logan 刚刚解决了它。