来自 useStaticQuery 的 Gatsby 结果未定义

【问题标题】：Gatsby result from useStaticQuery is undefined来自 useStaticQuery 的 Gatsby 结果未定义
【发布时间】：2021-07-08 16:37:24
【问题描述】：

我有一个变量来存储来自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

【问题讨论】：

标签： graphql gatsby

【解决方案1】：

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

此查询将返回类似于以下内容的结果：

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

这意味着你不能通过解构（{...}）访问对象backgroundImages，但你可以访问data。如果你尝试：

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

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

【讨论】：