CODEWITHSUNDEEP
javascriptgraphqlgatsby
pixel
pixel

Reputation: 23

Attempt at displaying data results in graphql error "Cannot read property 'map' of undefined"

Here's the code in my gatsby-node.js:

const fetch = require("node-fetch")

const NODE_TYPE = `objkt`

exports.sourceNodes = async ({
  actions,
  createContentDigest,
  createNodeId,
}) => {
  const { createNode } = actions

  const response = await fetch(
    "https://staging.api.tzkt.io/v1/bigmaps/523/keys?value.issuer=tz1V9ZviaGUWZjGx4U7cGYFEyUGyqpFnVGXx&active=true"
  )
  const objkt = await response.json()

  objkt.forEach((node, index) => {
    createNode({
      ...node,
      id: createNodeId(`${NODE_TYPE}-${node.id}`),
      parent: null,
      children: [],
      internal: {
        type: NODE_TYPE,
        content: JSON.stringify(node),
        contentDigest: createContentDigest(node),
      },
    })
  })
}

exports.onPreInit = () => console.log("Loaded gatsby-node")

This works fine when displaying the data through 

{JSON.stringify(data, null, 4)}
Results in error when used in a gatsby .js page file.

Code in the gatsby page file:

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import { Helmet } from "react-helmet"

export const query = graphql`
  {
    allObjkt {
      edges {
        node {
          value {
            objkt_id
            xtz_per_objkt
          }
        }
      }
    }
  }
`
export default ({ data }) => <>
  <h1>Punks on sale...</h1>
  <ul>
    {data.allObjkt.nodes.map(objkt => (
      <li key={objkt.id}>
        <h2>{objkt.xtz_per_objkt}</h2>
      </li>
    ))}
  </ul>

</>

Error produced:

Cannot read property 'map' of undefined

  20 |   <h1>Punks on sale...</h1>
  21 |   <ul>
> 22 |     {data.allObjkt.nodes.map(objkt => (
     |                         ^
  23 |       <li key={objkt.id}>
  24 |         <h2>{objkt.xtz_per_objkt}</h2>
  25 |       </li>

Some background, I'm using this site to source my data. I've been getting this error for a while now and I don't know what is up with the code.

Upvotes: 2

Views: 516

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29335

You have a typo. You are querying for edges and node, not nodes. So your code should look like:

export default ({ data }) => <>
  <h1>Punks on sale...</h1>
  <ul>
    {console.log("data is", data)}
    {data.allObjkt.edges.map(({node})=> {
     console.log("node", node);
     return <li key={node.value.objkt_id}>
        <h2>{node.value.xtz_per_objkt}</h2>
      </li>
    })}
  </ul>

</>

Upvotes: 2

Related Questions