Gatsby/GraphQL 在代码中的行为与 GraphiQL 不同

Question

所以我通过以下 this:

创建了一个入门 Gatsby 网站

我在GraphCMS上有一些简单的内容：

我正在尝试查询 GraphCMS 以 return 所有页面帖子。在本地试验 GraphiQL 时，我使用这个查询：

  query PageQuery {
    allGraphCmsPage {
      nodes {
        headline
        tagline
      }
    }
  }

return正是我想要的

在我的 index.js 中，我正在使用以下代码查询 graphCMS：

const {graphCmsPage = {}} = useStaticQuery (graphql`
  query PageQuery {
    allGraphCmsPage {
      nodes {
        headline
        tagline
      }
    }
  }
`);

当我 console.log 它或尝试引用任何属性时，它们都是空的/（被 returned 的对象本身是一个 proto)

我是 GraphQL 和 Gatsby 的新手，所以我想我没有正确解决问题。

Answer 1

使用 page query 时，您的数据存储在 props.data 对象下。在你的情况下它将是：

props.data.allGraphCmsPage

整个代码应该如下所示：

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

请记住，您使用的是静态查询（或 useStaticQuery 挂钩）而不是页面查询，这是我的建议。查看有关 Static vs Normal queries 的文档以获取更多信息，但基本上，应该使用页面查询收集 top-level 组件中的所有检索数据，并且应该使用静态查询获取所有元数据和另一种静态数据，一般而言。

Gatsby/GraphQL 在代码中的行为与 GraphiQL 不同

Gatsby/GraphQL behaving differently in code from GraphiQL

javascript

static

graphql

gatsby

jamstack