[英]Gatsby/GraphQL behaving differently in code from GraphiQL
So I created a starter Gatsby site by following this :所以我按照创建一个启动盖茨比网站这样:
I have some simple content on GraphCMS :我在GraphCMS上有一些简单的内容:
I am trying to query GraphCMS to return all the page posts.我正在尝试查询 GraphCMS 以返回所有页面帖子。 When experimenting with GraphiQL locally I use this query:
在本地试验 GraphiQL 时,我使用以下查询:
query PageQuery {
allGraphCmsPage {
nodes {
headline
tagline
}
}
}
Which returns exactly what I want返回的正是我想要的
In my index.js I am querying graphCMS with this code:在我的 index.js 中,我使用以下代码查询 graphCMS:
const {graphCmsPage = {}} = useStaticQuery (graphql`
query PageQuery {
allGraphCmsPage {
nodes {
headline
tagline
}
}
}
`);
When I console.log it or try to reference any of the properties, they are all null/(the object being returned itself is a proto )当我 console.log 它或尝试引用任何属性时,它们都是 null/(返回的对象本身是一个proto )
I am very new to GraphQL & Gatsby so I imagine I am not resolving something properly.我对 GraphQL 和 Gatsby 很陌生,所以我想我没有正确解决某些问题。
When using a page query , your data is stored under props.data
object.使用页面查询时,您的数据存储在
props.data
对象下。 In your case it will be:在您的情况下,它将是:
props.data.allGraphCmsPage
The whole code should look like:整个代码应该如下所示:
import React from 'react'
import { graphql } from 'gatsby'
const HomePage = ({data}) => {
console.log(data)
return (
<div>
Hi!
</div>
)
}
export const query = graphql`
query PageQuery {
allGraphCmsPage {
nodes {
headline
tagline
}
}
}
`
export default HomePage
Keep in mind that you are using a static query (or the useStaticQuery
hook) instead of a page query, what I would suggest.请记住,您使用的是静态查询(或
useStaticQuery
挂钩)而不是页面查询,这是我的建议。 Check the documentation about Static vs Normal queries for further information but basically, all retrieved data in top-level components should be gathered using a page query and all the metadata and another kind of static data should be fetched using a static query, speaking generally.查看有关静态与正常查询的文档以获取更多信息,但基本上,应使用页面查询收集顶级组件中所有检索到的数据,并且应使用静态查询获取所有元数据和另一种静态数据,一般来说。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.