CODEWITHSUNDEEP
reactjsgraphqlgatsby
kreed
kreed

Reputation: 61

GraghQL query returning integer instead of object

I can't figure out why none of my queries are working on my Gatsby projects.

   import React from "react"
   import { graphql } from "gatsby"

   const site_info = () => {
     const query = graphql`
       query title {
         allSite {
           edges {
             node {
               siteMetadata {
                  title
               }
             }
           }
         }
       }
     `
     console.log(query)
     return <p>Test</p>
   }

   export default site_info

In the console, I'm expecting an object where I can see the title in metadata, however, I'm getting 2641826822.

I copied the query directly from GraphiQL where I'm seeing the expected result, so not sure why it isn't working here.

Upvotes: 0

Views: 536

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

When you query (using a page query as you've provided) some data using GraphQL in a Gatsby schema, your data is stored as a page prop (not in the query variable itself), so you need to access to them props and iterate through the object until you find your data. An ideal structure data should look something like:

const yourPage = ({ data }) => {
  const { title } = data.allSite.edges[0].node.siteMetadata;

  return <Layout>
    <h1>{title}</h1>
  </Layout>;
};

export const yourPageData = graphql`
       query title {
         allSite {
           edges {
             node {
               siteMetadata {
                  title
               }
             }
           }
         }
       }
     `;

export default yourPage;

Basically, in the snippet above I'm destructuring data as a prop (instead of doing prop.data) and I do the same with data.allSite.edges[0].node.siteMetadata to get the title.

I would recommend some documentation reading about Querying Data in Pages with GraphQL before you dive into GraphQL on the rocks.

Upvotes: 2

Related Questions