Query multiple JSON files with graphQL in Gatsby

user_6719352 0
Viewed 1464

I'm trying to query two JSON files that I put in a src/data directory. I installed gatsby-transformer-json and added the directory as a source.

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/data/`
  }
}

I then tried several ways to build the graphql query but I am only able to successfully query the first json file I created work_experiences.json which looks like this although my second file skills.json has the exact same structure

{
  "work_experiences": [
    {
      "body": "lorem ipsum",
      "title": "lorem ipsum",
      "role": "lorem",
      "dateBegin": "2015-10-01",
      "dateEnd": "2016-07-03",
      "companyUrl": "http://www.lorem.com",
      "workUrl": "/lorem/ipsum/"
    },
    ...

A query on skills.json always returns null enter image description here enter image description here

Is there a way to query both files or do I have to merge everything into a single data.json file ?

graphql gatsby reactjs json
3 Answers

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
  }
}
user_46712630

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 {

      }      
    }    
  }
}
user_31998220

@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
        }
      }
    }
  }
`
user_98780710
Related