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。

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

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

这意味着您不能通过析构函数({...}(访问对象backgroundImages，但可以访问data。如果你尝试：

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

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