尝试显示数据导致 graphql 错误 "Cannot read property 'map' of undefined"

Question

这是我的 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")

通过

{JSON.stringify(data, null, 4)}

显示数据时效果很好，但在 gatsby .js 页面文件中使用时出错。

gatsby 页面文件中的代码：

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>

</>

产生错误：

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>

一些背景知识，我正在使用 this site 来获取我的数据。我已经收到这个错误一段时间了，我不知道代码是怎么回事。

Answer 1

你打错了。您正在查询 edges 和 node，而不是 nodes。所以你的代码应该是这样的：

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>

</>

尝试显示数据导致 graphql 错误 "Cannot read property 'map' of undefined"

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

javascript

graphql

gatsby