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数据将通过道具注入到你的页面中。尝试注销它，您应该会看到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
  }
}
`

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