DEV Community

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...

Read full post

Maciej Walaszczyk • Feb 14 '19

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>

Nate Osterfeld • Jan 10 '20

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.

Raymond Camden • Feb 15 '19

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?

Lucis • Sep 5 '19

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.