Graphql query logs a number in console

user_11847590 0
Viewed 349

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

graphql gatsby
1 Answers

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.

user_83604960
Related