Graphql query logs a number in console - graphql

Question

I am at the very first point of making an app with gatsby-strapi toolchain and as usual, I want to log the query data on the console. But for some reason, only a number is logged. The query works properly in Graphql dashboard (http://localhost:8000/___graphql) and also it can be printed in the DOM. What is that number? What is going on?
Here is the code:
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 dashboard returns this (and though the query has something to return):
{
"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
}
}
}
This result would also be printed out in the DOM (inside that div).
And finally, this is what the console logs:
Returned data: 1435490915

Answer 1

You're GraphQL data will be injected into you page through props. Try logging this out instead and you should see the result of the GraphQL query.
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
}
}
`
The reason why you are seeing a number logged when executing console.log("Returned data: "+ pageQuery) is probably because the Gatsby internals converts the graphql tagged template literal into a number for internal usage.