Query multiple JSON files with graphQL in Gatsby Query multiple JSON files with graphQL in Gatsby json json

Query multiple JSON files with graphQL in Gatsby


If you have 2 files in the same root folder and will query, you will get data only from a single node, because dataJson queries into a single file.

Or you use allDataJson like this:

{  allDataJson{    edges{      node{        work_experiences{          title        }        skills{         name        }      }    }  }}

for a good solution, in this case, is to have your single-object json files stored in separate folders with just one json per folder.

For example, you have some Users data:

  • create a User folder in your src/data.
  • create an index.json file with { "name": "blabla" }.
  • query your data.

Like this:

{  userJson{    name  }}


@aymen is correct. You could then set your query to call multiple separate JSON files:

export const pageQuery = graphql`  query indexQuery {    allSocialJson {      edges {        node {          url          type        }      }    }    allExperienceJson {      edges {        node {          id          company          title        }      }    }    allCertificationsJson {      edges {        node {          name          id          start          end          authority        }      }    }    allEducationJson {      edges {        node {          id          school          program        }      }    }  }`


I had the same problem and copied @Aymen's method.

I was trying to load multiple json files into my gatsby site, using the two plug-ins below (gatsby-source-filesystem and gatsby-transformer-json).

Here is how my gatsby-config.js file is set-up:

 const path = require(`path`) module.exports = {  siteMetadata: {    title: "My Homepage",  },  plugins: [    `gatsby-transformer-json`,    {      resolve: `gatsby-source-filesystem`,      options: {        name: `data`,        path: path.join(__dirname, `data`),      },    },  ],}
  1. First, within my data folder, I created separate folders.
  2. Next, I added an index.json file into each of the separate folders. The project file structure looks like this:
src -- data ---- folder1------ index.json---- folder2------ index.json---- folder3------ index.json
  1. Then, I was able to access data to all of my index.json files with this single query:
query MyQuery {  allIndexJson {    edges {      node {      }          }      }}