Gatsby 中的 JSON 和 GraphQL

问题描述

我有一个名为 Test.json 的 JSON 文件，其中包含所有数据。

[  { "name" : "Margo","birthDate": "1990.03.15","tiMetable": [
       {"time": "8.00","task": "todoMargoElem1"},{"time": "9.00","task": "todoMargoElem2"}
   },{ "name" : "Arthur","task": "todoArthurElem1"},"task": "todoArthurElem2"}
   }
}

我想使用来自组件的调用数据，所以我尝试调用 GraphiQL。代码导出器给我

const ComponentName = () => {
  const data = useStaticQuery(graphql`
    {
      allTestJson {
        edges {
          node {
            name
            tiMetable {
              time
              task
            }
          }
        }
      }
    }
  `)
  return <pre>{JSON.stringify(data,null,4)}</pre>
}

在我的组件 Mycomponent 中，我接下来做了

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


export default function Sched() {
  const data = useStaticQuery(graphql`
  {
    allTestJson {
      edges {
        node {
          name
          tiMetable {
            time
            task
          }
        }
      }
    }
  }
  `)
  const results = data.allTestJson.edges.map (({node}) => {
    const {name,time,task} = node;
    return {
      name,task
    }
  })
  return (<div>
    {results.map (({eventName,task})=> 
      <div key = {name}>
        {name}
        {time}
        {task}
      </div>
    )}
  </div>
 ) 
}

但结果我看到的只是结构

<div> {name} </div>
<div> {name} </div>

我如何查看{时间，任务}？ 为什么地图没有显示我的对象的所有节点？

解决方法

检查对象解析

 const results = data.allTestJson.edges.map (({node}) => {
    const {name,time,task} = node; // check here
    const {name,timetable:{time,task}} = node; // this is an example of nested object destructing
    return {
      name,task
    }
  })

,

time 和 task 位于 timetable 嵌套对象内，因此生成的代码应如下所示：

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


export default function Sched() {
  const data = useStaticQuery(graphql`
  {
    allTestJson {
      edges {
        node {
          name
          timetable {
            time
            task
          }
        }
      }
    }
  }
  `)
 return data.allTestJson.edges.map (({node}) => {
    const {name,timetable} = node;
    return <div key = {name}>
        {name}

        {timetable.map(item=><div key={item.task}>{item.time},{item.task}</div>)}
      </div>
    
  })

}

birthday 字段没有被查询（我猜这是一个错字）所以将它添加到正确的位置。