3

I have a project structure like so:

-$PROJECT
--src
---data
----projects
-----project1
------project.json
------images
-------project1-preview.png
-----project2
------project.json
-------images
...

And so on, for however many projects. I could query these project.json files when they were named the title of the project and within a projects folder using allProjectsJson in graphQl, however now they are within subfolders within projects. I can only query them individually as allProject1Json and so on. Is there a way to query allProjectsJson so I get all the project.json files?

I can find my projects files by querying allFile with a filter for json files, however, these files are not transformed json so I can't access the elements.

In my gatsby-config file I am importing src/data as a source for files.

2 Answers 2

5

From my answer at https://github.com/gatsbyjs/gatsby/issues/20734:

Ahh, I see what you mean :) luckily gatsby-transformer-json has a plugin option that will help get you unstuck!

It's the typeName option. You should be able to check for a field on each JSON node, and use that as the type name. Something like this:

    {
      resolve: `gatsby-transformer-json`,
      options: {
        typeName: ({ node, object, isArray }) =>
          object.project ? `Project` : `Json`,
      },
    },

That way anything with the field project defined will show up as allProject { ... }, where any other json files will show up as allJson { ... }

{
  allProject {
    nodes {
      project
    }
  }
}
{
  "data": {
    "allProject": {
      "nodes": [
        {
          "project": "project1"
        },
        {
          "project": "project2"
        }
      ]
    }
  }
}
0
0

My project works very similarly. Here's how I have my gatsby-config.js setup:

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'project',  // Identifier. Will then be queried as `allProjectsJson`
        path: './data',   // Source folder containing the JSON files
      },
    },
    ...,
  ]
};

Example JSON file:

[
  {
    "title": "Hello",
    "description": "World",
    "url": "https://www.google.com",
    "image": "./images/img1.jpg"
  },
  {
    "title": "World",
    "description": "Hello",
    "url": "https://www.google.com",
    "image": "./images/img2.jpg"
  },
]

Example query:

query projects {
  allProjectsJson {
    edges {
      node {
        id
        title
        description
        url
        image {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

Hope this helps!

4
  • I have my projects split into individual json files within respective folders containing the project.json file and an images folder. Here is code sandbox example: codesandbox.io/s/… I couldn't figure out how to recompile the project in order to do a graphQl query on the json files.
    – Casey
    Jan 21, 2020 at 2:47
  • I see the issue a lot clearer now. I'm assuming you did, but just in case: have you tried setting your gatsby-source-filesystem path to be ${__dirname}/src/data/projects? If so, what results does this yield? Jan 21, 2020 at 4:00
  • I tried it in the codesandbox and have the same result
    – Casey
    Jan 21, 2020 at 4:50
  • I upvoted you from -1 as I thought that was unfair. Jan 24, 2021 at 14:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.