初学者 GraphQL 和 Drupal - 静态查询返回 TypeError：无法读取未定义的属性“allNodeData”

Posted 2023-03-08

【中文标题】初学者 GraphQL 和 Drupal - 静态查询返回 TypeError：无法读取未定义的属性“allNodeData”

【英文标题】：Beginner GraphQL & Drupal - Static Query returns TypeError: Cannot read property 'allNodeData' of undefined

【发布时间】：2020-01-13 20:38:15

【问题描述】：

我是 Graphql 的新手，但无法使用静态查询/useStaticQuery 从 Drupal 查询 GraphQL 中的任何内容。页面查询工作正常，但是，我希望避免在页面内工作的限制。

Gatsby-source-drupal 已连接，我可以看到 localhost/___graphql 中填充了字段。

当我在 Gatsby-config.js module.exports 中硬编码信息时，静态查询可以正常工作。否则，无论在何处或以何种类型的配置，我都会一遍又一遍地收到相同的错误。

任何提示将不胜感激

import  Link  from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import  useStaticQuery, graphql  from "gatsby"
import  useHeaderImg  from "../../hooks/use-header-images.js"

import "./header.css"

function Header( siteTitle ) 
  const  site  = useStaticQuery(
    graphql`
      query 
        site 
          siteMetadata 
            description
            author
          
        
      
    `
  )
  const  format, processed, value  = useHeaderImg()
  return (
    <header className="rebeccapurple">
      <h3> This is a variable format</h3>
      <div className="purpz">
        <h1 className="zero">
          <Link className="link" to="/">
            siteTitle Woah site.siteMetadata.author
          </Link>
        </h1>
      </div>
    </header>
  )

Header.propTypes = 
  siteTitle: PropTypes.string,


Header.defaultProps = 
  siteTitle: ``,


export default Header

import  useStaticQuery, graphql  from "gatsby"

// Based off "Composing custom useStatic hooks"
export const useHeaderImg = () => 
  const  data  = useStaticQuery(
    graphql`
      query HeaderImgData 
        allNodeBelvedereBanner 
          edges 
            node 
              field_header 
                format
                processed
                value
              
            
          
        
      
    `
  )
  return data.allNodeBelvedereBanner.edges.node.field_header

上面的 Header 组件中的静态查询有效，因为我在 gatsby-config 中的 module.exports 中编码了 siteMetadata。如果我尝试以相同的方式从 drupal 查询任何内容，则会失败。

【参考方案1】：

According to the docs 你不需要解构data 所以data 将是undefined。

你试过了吗？

export const useHeaderImg = () => 
  const data = useStaticQuery(
    graphql`
      query HeaderImgData 
        allNodeBelvedereBanner 
          edges 
            node 
              field_header 
                format
                processed
                value
              
            
          
        
      
    `
  )
  return data.allNodeBelvedereBanner.edges.node.field_header

【讨论】：

太棒了！这确实让我在树上更进一步；现在，我的错误返回为TypeError: Cannot read property 'field_header' of undefined. 请注意，graphql 应该返回此 "data": "allNodeBelvedereBanner": "edges": [ "node": "field_header": "format": "basic_html", "processed": "Blvdr Header", "value": "Blvdr Header" ]

如果是数据，那么edges是一个数组：data.allNodeBelvedereBanner.edges[0].node.field_header

lmfao，我松了一口气，我只是愚蠢，这不是更糟糕的事情。谢谢你的帮助！！