DEV Community

Cover image for Reading Data From A JSON File With Gatsby + GraphQL

Reading Data From A JSON File With Gatsby + GraphQL

Emma Bostian āœØ on February 08, 2019

Goal: Use gatsby-transformer-json to read data from a local JSON file and dynamically generate list items in a React component. Use Case: I have a...
Collapse
 
walaszczyk_m profile image
Maciej Walaszczyk

Great post, Emma šŸ‘Œ

I have found a mistake with explaining empty brackets in JSX. You are putting:

<>
  <h1>Hello world</h1>
  <p>Another child component</p>
<>

as the same as

<div>
  <h1>Hello World</h1>
  <p>Another child component</p>
<div>

which is not true.

The true equivalent is

<React.Fragment>
  <h1>Hello World</h1>
  <p>Another child component</p>
</React.Fragment>
Collapse
 
nateosterfeld profile image
Nate Osterfeld

I was unsure of this in the regard of whether or not it compiled to a div tag at runtime, in which case I'd say your comment would be a little nitpicky, since she probably knows this and assumes it's easier to say it's a div than having to explain Fragment, but it actually doesn't get compiled to anything. Essentially the same thing, though, sorta. Okay mini rant over.

Collapse
 
raymondcamden profile image
Raymond Camden

Query - I love GraphQL (recent convert!) but I'm curious why it was used here? Given that the JSON data was static, not an API, and was already in a simple to use format, what was the purpose of using GraphQL to "query" it? Wasn't it already in a form appropriate for driving your dynamic navigation?

Collapse
 
lucis profile image
Lucis

Read about Gatsby. It's built for reusability (themes) and GraphQL powers that. If she would release her creation as a theme, a user could build their own json in their own data folder, and Gatsby would resolve it.

Collapse
 
vaidotas profile image
Vaidotas Piekus

This is awesome Emma. I want to rewrite my personal site using Gatsby and this is gonna be super helpful!

Collapse
 
emmabostian profile image
Emma Bostian āœØ

Aw yay! <3

Collapse
 
ianfabs profile image
Ian Fabs

this was actually so helpful, thank you!! i was looking for a way do this all day!

Collapse
 
stevexm profile image
Steve Melnikoff

Thank you, a very useful post that helped me better understand how to work with GraphQL!

Collapse
 
krichdev profile image
Kyle Richardson

Have you tried filtering on your query with this transformer plugin? I am trying to filter by a value and Iā€™m not having any luck.

Collapse
 
zeptobook profile image
ZeptoBook

Here is a step by step guide about how to create your blog site using Gatsby.
zeptobook.com/create-your-blog-sit...

Collapse
 
tomekponiat profile image
Tomek Poniatowicz

Hey Emma, if you need a GraphQL schema visualization tool take a look at graphqleditor.com/

Collapse
 
luispa profile image
LuisPa

Great post!