Gatsby-Strapi开发中console.log仅输出数字而非查询数据的问题

那个数字是什么？ #

你看到的1435490915并不是查询结果，而是Gatsby内部给你的pageQuery分配的唯一标识符ID。当你使用graphql标签定义查询时，Gatsby并不会直接返回查询结果——它会把这个查询转换成内部可识别的标识，在构建/运行时才去执行查询并把数据注入到组件的data props中。

问题原因 #

你现在是在组件外部直接打印pageQuery变量，这时候它还只是Gatsby处理查询前的内部标记，不是实际的查询结果。真正的查询结果是通过组件的data参数传递进来的，只有在组件内部才能访问到。

解决方案 #

把console.log移到组件函数内部，打印传入的data参数就可以看到实际的查询数据了：

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

const IndexPage = ({data}) => {
  // 在这里打印实际的查询数据
  console.log("Returned data: ", data)
  return (
    <Layout>
      <SEO title="Home" />
      <h1>Hi people</h1>
      <div>{JSON.stringify(data)}</div>
    </Layout>
  )
}

export default IndexPage

export const pageQuery = graphql`
 query MyQuery {
  allStrapiCategory {
    edges {
      node {
        createdAt
        name
      }
    }
    totalCount
  }
 }
`

为什么DOM里能正常显示？ #

因为你在DOM中使用的{JSON.stringify(data)}是在组件内部访问的data props，这已经是Gatsby执行完查询后返回的实际数据了，所以能正常渲染。

内容的提问来源于stack exchange，提问作者BaN