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