useStaticQuery 的 Gatsby 结果未定义

Question

我有一个变量存储 useStaticQuery 调用的结果，但是当我 console.log 它时，它是未定义的。该查询在 GraphiQL 中运行良好，那么为什么它不能与 useStaticQuery 一起使用？

const {backgroundImages} = useStaticQuery(graphql`
    query {
      allFile(
        filter: {extension: {regex: "/(png)/"}, relativeDirectory: {eq: "slider"}}
      ) {
        edges {
          node {
            base
            childImageSharp {
              gatsbyImageData(width: 10, quality: 10, webpOptions: {quality: 70})
              
            }
          }
        }
      }
    }
  `)
console.log(backgroundImages) // undefined

Answer 1

问题是因为您正在解构结果并要求查询结果中不存在的键 backgroundImages。

此查询会return 类似于以下内容的结果：

{
  "data": {
    "allFile": {
      "edges": [
        "node": .....
      ]
    }
  }
}

也就是说你不能通过解构（{...}）访问对象backgroundImages，但是你可以访问data。如果你尝试：

const {data} = useStaticQuery(graphql`
    query {
      ...
    }
  `)
console.log(data)

您应该能够看到查询日志。

useStaticQuery 的 Gatsby 结果未定义

Gatsby result from useStaticQuery is undefined

graphql

gatsby