menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
# All channels
view-forward
# General
view-forward
# I Made This
view-forward
# Meta
view-forward
# Themes
view-forward
Team

Generating JSON file with Gatsby

April 17, 2018 at 7:30pm

Generating JSON file with Gatsby

April 17, 2018 at 7:30pm
What is the best way to generate JSON files with Gatsby? I would like to make some of the Gatsby data available as a simple API in the form of JSON files generated along with the Gatsby app. Are there any examples on how to do this?

April 17, 2018 at 8:18pm
You could create these in your site's gatsby-node.js file. Implement `onPostBuild` and query for the data you need and then write them out to JSON files in the `public` folder e.g.
  • reply
  • like
https://www.gatsbyjs.org/docs/node-apis/#onPostBuild
exports.onPostBuild = ({ graphql }) = {
graphql(QUERY).then(result => processAndWriteJSONFiles(result))
}
like-fill
8
  • reply
  • like

January 28, 2019 at 1:57am
The idiomatic way to do this with Gatsby is to use the StaticQuery component, which can expose source data loaded via Gatsby source plugins to your components. I have successfully used this approach for dynamically rendered pages that pull data with references to StaticQuery loaded data. See https://www.gatsbyjs.org/docs/static-query/ for more information on the StaticQuery component.
  • reply
  • like

January 28, 2019 at 8:42am
There is also a plugin that creates JSON feeds. Haven't tried it. Don't know if it suits your need. Just mentioning it. ;) https://www.gatsbyjs.org/packages/gatsby-plugin-feed-generator/
  • reply
  • like

July 9, 2020 at 8:23pm
The idiomatic way to do this with Gatsby is to use the StaticQuery component, which can expose source data loaded via Gatsby source plugins to your components. I have successfully used this approach for dynamically rendered pages that pull data with references to StaticQuery loaded data. See https://www.gatsbyjs.org/docs/static-query/ for more information on the StaticQuery component.
Realizing I'm late to the party here, but doesn't static-query only reference site data in the gatsby-config file?
  • reply
  • like

October 21, 2020 at 7:32pm
Realizing I'm late to the party here, but doesn't static-query only reference site data in the gatsby-config file?
I'm even later to the party :-) The question is different. It's about generating static JSON files and expose them like a simple API. Let's say your Site is about products. You generate many static pages like /products/a-nice-table/ and /products/a-cheep-chair/. Additionally, you want to expose these product data as a simple JSON API. Visitors could retrieve the data as JSON like this /products/a-nice-table.json and /products/a-cheep-chair.json
With StaticQuery You can do almost the same as with Query but you can't use parameters/variables in the query.
Edited
  • reply
  • like