[英]JSON in Gatsby with GraphQL
I have one JSON file named Test.json with all data in it.我有一个名为 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"}
}
}
I'd like to use call data from component, so I tried to call GraphiQL.我想使用来自组件的调用数据,所以我尝试调用 GraphiQL。 Code exporter gives me代码导出器给了我
const ComponentName = () => {
const data = useStaticQuery(graphql`
{
allTestJson {
edges {
node {
name
timetable {
time
task
}
}
}
}
}
`)
return <pre>{JSON.stringify(data, null, 4)}</pre>
}
In my component Mycomponent I did next在我的组件 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>
)
}
But as a result i see just construction like但结果我看到的只是建筑
<div> {name} </div>
<div> {name} </div>
How can I see {time, task}?我怎样才能看到{时间,任务}? Why map doesn't show all nodes of my objects?为什么 map 不显示我的对象的所有节点?
Check the object desctructing检查 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
}
})
time
and task
are inside timetable
nested object so the resulting code should look like: 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
field is not being queried (I guess it's a typo) so add it in the correct position.未查询birthday
字段(我想这是一个错字),因此将其添加到正确的 position 中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.