CODEWITHSUNDEEP
graphqlgatsby
brooksrelyt
brooksrelyt

Reputation: 4025

TypeError: Cannot read property 'unformatted' of undefined

I have a GatsbyJS project where I am using StaticQuery to query a JSON file. I may be querying my data incorrectly but, with other react projects I haven't had this issue. I assumed the structure would be the same. Can someone help point me in the right direction?

Error:

enter image description here

Data structure in console/inspect:

enter image description here

My code:

import React from 'react'
import { graphql, StaticQuery } from 'gatsby'

export default () => (
  <StaticQuery
    query={graphql`
      query {
        allDataJson {
          edges {
            node {
              id
              authorship_date {
                unformatted
              }
            }
          }
        }
      }
    `}
    render={data => (
      <header>
        {console.log(data)}
        {console.log(data.authorship_date.unformatted)}
        <p>{data.authorship_date.unformatted} test</p>
      </header>
    )}
  />
)

Upvotes: 0

Views: 111

Answers (1)

Derek Nguyen
Derek Nguyen

Reputation: 11577

As you can see in the console.log, data doesn't have a authorship_date property, you should try data.allDataJson.edges[0].node.authorship_date.unformatted

To make accessing a (tiny) bit less painful, you can modify the query a bit, using alias & the new shortcut (only available in gatsby ^2.2 I think). For example:

  query {
    json: allDataJson {
      nodes {
        id
        authorship_date {
          unformatted
        }
      }
    }
  }

This'll cut down from 

data.allDataJson.edges[0].node.authorship_date

to 

data.json.nodes[0].authorship_date

And of course it's always a good idea to assign your node to a variable first so you don't have to write the whole thing every time.

Upvotes: 1

Related Questions