Graphql 查询在控制台中记录一个数字

Question

我正处于使用 gatsby-strapi 工具链制作应用程序的第一步，并且像往常一样，我想在控制台上记录查询数据。但由于某种原因，只记录了一个数字。该查询在 Graphql 仪表板 (http://localhost:8000/___graphql) 中正常工作，并且可以在 DOM 中打印。那个号码是多少？到底是怎么回事？ 代码如下：

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
const IndexPage = ({data}) => (
  <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
  }
}
`
console.log("Returned data: "+ pageQuery)

Graphql 仪表板返回这个（尽管查询有一些返回）：

{
  "data": {
    "allStrapiCategory": {
      "edges": [
        {
          "node": {
            "createdAt": "2020-07-17T14:22:19.752Z",
            "name": "music-history",
            "id": "Category_5f11b41b2a43a66a84b0ac5c"
          }
        },
        {
          "node": {
            "createdAt": "2020-07-17T14:48:40.595Z",
            "name": "education",
            "id": "Category_5f11ba48725ad26f9aed7aee"
          }
        }
      ],
      "totalCount": 2
    }
  }
}

这个结果也会在 DOM 中打印出来（在那个 div 里面）。 最后，这是控制台记录的内容：

返回数据：1435490915

Answer 1

你的 GraphQL 数据会通过 props 注入到你的页面中。尝试将其注销，您应该会看到 GraphQL 查询的结果。

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
  }
}
`

您在执行 console.log("Returned data: "+ pageQuery) 时看到记录数字的原因可能是因为 Gatsby 内部将 graphql 标记的模板文字转换为数字以供内部使用。