[gatsby-transformer-json] access all json file in subdirectories within a folder

Description

I would like to access all transformed JSON within a folder, where each json file is located within a subdirectory and is named project.json. However, this only allows access via allProjectNameJson. I will not know the projectName (folder name) at runtime to add it to my query.

Steps to reproduce

CodeSandbox I built this sandbox with the required gatsby-config.js entries for gatsby-transformer-json and the path to ${dir}/src/data. Unfortunately, graphQl isn’t updating and doesn’t see the json files in their project directories.

Expected result

I can query allProjectsJson to access project1’s project.json and project2’s project.json.

Actual result

I can only query allProject1Json or allProject2Json.

Environment

  System:
    OS: Linux 4.4 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 4.4.19 - /bin/bash
  Binaries:
    Node: 10.16.3 - /usr/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 6.9.0 - /usr/bin/npm
  Languages:
    Python: 2.7.15+ - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.2
  npmPackages:
    gatsby: ^2.18.21 => 2.18.21
    gatsby-image: ^2.2.38 => 2.2.38
    gatsby-plugin-netlify-cms: ^4.1.37 => 4.1.37
    gatsby-plugin-netlify-cms-paths: ^1.3.0 => 1.3.0
    gatsby-plugin-postcss: ^2.1.19 => 2.1.19
    gatsby-plugin-sharp: ^2.3.13 => 2.3.13
    gatsby-source-filesystem: ^2.1.46 => 2.1.46
    gatsby-transformer-json: ^2.2.25 => 2.2.25
    gatsby-transformer-sharp: ^2.3.12 => 2.3.12
  npmGlobalPackages:
    gatsby-cli: 2.8.27

[TylerBarnes]

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"
        }
      ]
    }
  }
}

[cyrilf]

I’m experiencing the same issue as @caseykey As a workaround I used JsonFiles instead of Json

So in my case it’s:

{
  resolve: `gatsby-transformer-json`,
  options: {
    typeName: ({ object }) => object.typeName || "JsonFiles"
  }
}