Best practices for where to record data when using Gatsby, and how to import that data into gatsby.config.js or graphql

Question

I followed along with the Gatsby Docs about data in Gatsby where they showed me how I could create a graphql variable in the siteMetadata block within

gatsby.config.js

 module.exports = { siteMetadata: { title: `Title from siteMetadata`, }, plugins: [ `gatsby-plugin-emotion`, { resolve: `gatsby-plugin-typography`, options: { pathToConfigModule: `src/utils/typography`, }, }, ], }

and then could access it using a graphql query

 import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" export default ({ data }) => ( <Layout> <h1>About {data.site.siteMetadata.title}</h1> <p> We're the only site running on your computer dedicated to showing the best photos and videos of pandas eating lots of food. </p> </Layout> ) export const query = graphql` query { site { siteMetadata { title } } } `

---

I am wanting to keep all the data from my web app separate from the rest of the code, and all contained in one place, for example I might have a file that looks like

navLinks = ["Home", "About", "Contact"]
homePageIntro = "Hello! Thank you for visiting my website"
logo = 'https://aws.amazon.com/mys3.logo'
contactPhoto = 'https://aws.amazon.com/mys3.logo'
aboutPageFirstPar = 'This is the first paragraph on the about page'
aboutPageSecondPar = 'This is the Second paragraph on the about page'

or maybe it might be better practice to separate my text and links into separate files?

I just have this feeling that inserting all data variables into siteMetadata might not be the best way to go about this, but maybe I'm wrong?

Answer 1

You can move your data in a single JSON file and then use gatsby-transformer-json to put it to graphql. That way, you can access your data using a graphql query.

PS. You can also use the useStaticQuery hook.

Read more about it here: https://www.gatsbyjs.org/packages/gatsby-transformer-json/