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`), }, }, ],}
- First, within my data folder, I created separate folders.
- 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
- Then, I was able to access data to all of my index.json files with this single query:
query MyQuery { allIndexJson { edges { node { } } }}