JSON in Gatsby with GraphQL

Question

I have one JSON file named Test.json with all data in it.

[  { "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. 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


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?

So you see only name in the div instead of name, time and task ? — SajZ, Mar 31 '21 at 16:41
Yes. I see next "Margo Arthur" And I don't understand "why"? Where is time and tasks? — Anton Zhukouski, Mar 31 '21 at 16:42
i guess its not deconstructed correctly. the time and task value may be undefined. Have your tried to console log where you destructured the node ? Because time and task is in timetable which may not be destructured correctly. const results = data.allTestJson.edges.map (({node}) => { const {name, time, task} = node; return { name, time, task } }) — SajZ, Mar 31 '21 at 16:45

score 0 · Answer 1 · answered Mar 31 '21 at 16:55

0

Check the object desctructing

 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
    }
  })

answered Mar 31 '21 at 16:55

SajZ

262
3
16

I still have some troubles, you can see it in me comment above. – Anton Zhukouski Apr 01 '21 at 22:37

Ferran Buireu · Answer 2 · 2021-04-02T05:40:43.170

0

time and task are inside timetable nested object so the resulting code should look like:

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.

edited Apr 02 '21 at 05:40

answered Mar 31 '21 at 18:41

Ferran Buireu

28,630
6
39
67

I tried to your code, but it doesn't work, so I tried next ``` const results = data.allTestJson.edges.map (({node}) => { const {name, timetable: [{ time, task }]} = node; return { name, time, task } }) ``` and got just "Margo 8.00 toDoMargoElem1 Arthur 8.00 toDoArthurElem1". But I also need "Margo 9.00 toDoMargoElem2 Arthur 9.00 toDoArthurElem2". Can you help me? I still don't understand it. – Anton Zhukouski Apr 01 '21 at 22:16
Also I tried to JSON.stringify(results) and got just "Margo 8.00 toDoElem1" and the same for Arthur. What's wrong with data? – Anton Zhukouski Apr 01 '21 at 22:24
This is because timetable is an array. I've redone the answer, simplifying the structure (1 loop instead of 2) – Ferran Buireu Apr 02 '21 at 05:32
I'm glad to help. Please consider accepting/upvoting the answer to close the issue – Ferran Buireu Apr 12 '21 at 16:20

JSON in Gatsby with GraphQL

2 Answers2