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

问题描述

因此，我通过遵循this创建了一个盖茨比入门网站：

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

我正在尝试查询GraphCMS以返回所有页面帖子。在本地试用GraphiQL时，我使用以下查询：

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

确切返回我想要的东西

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

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

当我进行console.log记录或尝试引用任何属性时，它们全部为null /（返回的对象本身是 proto ）

我是GraphQL和Gatsby的新手，所以我想我无法正确解决某些问题。

解决方法

使用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的文档，但是基本上，应该使用页面查询来收集顶级组件中所有检索到的数据，并且一般来说，应该使用静态查询来获取所有元数据和另一种静态数据。