问初学者GraphQL & Drupal -静态查询返回TypeError:无法读取未定义的属性'allNodeData‘
EN

Stack Overflow用户

提问于 2019-09-12 01:43:04

回答 1查看 78关注 0票数 0

我是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- siteMetadata中用module.exports编码了配置。如果我尝试以同样的方式从drupal查询任何东西，它都会失败。

drupal

graphql

gatsby

javascript

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-09-12 01:48:59

你不需要解构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
}