Question

我是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查询任何内容，它将失败。

Answer 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
}

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

1 个答案: