[gatsby-transformer-json] multiple json files giving unexpected behaviour

[marceloverdijk]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I'm using the gatsby-transformer-json to load JSON collections to ultimately create dynamic pages.

  plugins: [
    {
      resolve: `gatsby-transformer-json`,
      options: {
        typeName: `Json`, // a fixed string
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/data/`,
      },
    }

In src/data I have 2 JSON files: continents.json and countries.json.

continents.json:

[
  {
    "id": "europe",
    "code": "EU",
    "name": "Europe"
  },
  {
    "id": "north-america",
    "code": "NA",
    "name": "North America"
  },
  {
    "id": "south-america",
    "code": "SA",
    "name": "South America"
  }
]

countries.json:

[
  {
    "id": "netherlands",
    "alpha2Code": "NL",
    "alpha3Code": "NLD",
    "name": "Netherlands",
    "continentId": "europe"
  },
  {
    "id": "united-kingdom",
    "alpha2Code": "GB",
    "alpha3Code": "GBR",
    "name": "United Kingdom",
    "continentId": "europe"
  },
  {
    "id": "united-states-of-america",
    "alpha2Code": "US",
    "alpha3Code": "USA",
    "name": "United States of America",
    "continentId": "north-america"
  }
]

Reproduction Link

https://github.com/marceloverdijk/my-gatsby-site

Steps to Reproduce

...

Expected Result

Based on the https://www.gatsbyjs.com/plugins/gatsby-transformer-json/ documentation I would expect to have a allContinentsJson and allCountriesJson collection in GraphiQL

Actual Result

Actually I only see a single allJson collection in GraphiQL which seems to have a combination of all fields of both collections...

Now if I query the files in GraphiQL I can see at least both files are recognized:

---

Now either there is a bug or multiple collections (split over 2 files) are not supported.

In the latter case I wonder if the documentation on https://www.gatsbyjs.com/plugins/gatsby-transformer-json/ is correct as the mention of allLettersJson gives the impression multiple collections would be supported..

If multiple collections are not supported is there another way to do this?
The JSON files mentioned should not be part of the build and should only be seen as development files.

Environment

System:
    OS: macOS 12.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 8.3.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Chrome: 97.0.4692.99
    Firefox: 96.0.3
    Safari: 15.2
  npmPackages:
    gatsby: ^4.6.0 => 4.6.0 
    gatsby-plugin-google-analytics: ^4.6.0 => 4.6.0 
    gatsby-plugin-react-helmet: ^5.6.0 => 5.6.0 
    gatsby-plugin-sass: ^5.6.0 => 5.6.0 
    gatsby-plugin-sitemap: ^5.6.0 => 5.6.0 
    gatsby-source-filesystem: ^4.6.0 => 4.6.0 
    gatsby-transformer-json: ^4.6.0 => 4.6.0 
  npmGlobalPackages:
    gatsby-cli: 4.6.0

Config Flags

No response

[LekoArts]

Hi!

You're overwriting the automatic typeName generation by using this: https://www.gatsbyjs.com/plugins/gatsby-transformer-json/#configuration-options

If you're using this it should work:

module.exports = {
  plugins: [
    `gatsby-transformer-json`
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/data/`,
      },
    },
  ]
};

[marceloverdijk]

Thx @LekoArts, indeed that works! I misunderstood that typeName was used for all collections (instead of appended) so I copied the wrong fragment from the documentation.

I must say it's really nice; especially the free filter possibilities you get when using GraphQL to query the data.
Now I only wished there was a solution for #34623

[LekoArts]

I've answered there. TL;DR I think the best way forward is to split it up into files. You could write a small node script for that