蓋茨比中的 JSON 與 GraphQL

Question

我有一個名為 Test.json 的 JSON 文件，其中包含所有數據。

[  { "name" : "Margo",
     "birthDate": "1990.03.15",
     "timetable": [
       {"time": "8.00",
        "task": "toDoMargoElem1"},
       {"time": "9.00",
        "task": "toDoMargoElem2"}
   },
   { "name" : "Arthur",
     "birthDate": "1990.03.15",
     "timetable": [
       {"time": "8.00",
        "task": "toDoArthurElem1"},
       {"time": "9.00",
        "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, 
      time,
      task
    }
  })
  return (<div>
    {results.map (({eventName, time, task})=> 
      <div key = {name}>
        {name}
        {time}
        {task}
      </div>
    )}
  </div>
 ) 
}

但結果我看到的只是建築

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

我怎樣才能看到{時間，任務}？ 為什么 map 不顯示我的對象的所有節點？

Answer 1

檢查 object 說明

 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, 
      time,
      task
    }
  })

Answer 2

time和task在嵌套的 object 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字段（我想這是一個錯字），因此將其添加到正確的 position 中。