Gatsby v4: jsonId automatic property prevents Json mapping in gatsby-config to be done

[no-chris]

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

It seems that Gatsby v4 breaks the json mapping because of the new jsonId property mentioned here: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/#gatsby-transformer-json

As I understand, that is because the mapping between the 2 entities is done by default on the id property. Since this property is now replaced by jsonId, the mapping is not done anymore.

Replacing id with jsonId here seems to do the trick, although the fix is probably more subtle:

gatsby/packages/gatsby/src/schema/infer/add-inferred-fields.js

Line 217 in 1a73b01

link: { by: path.join(`.`) || `id` },

Reproduction Link

https://github.com/no-chris/json-mapping-bug

Steps to Reproduce

1. Declare a mapping between 2 json files exactly as described here https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/#mapping-node-types
2. Run the following query

query MyQuery {
  experience: allExperienceJson {
    edges {
      node {
        company
        position
        from
        to
        items {
          label
          description
          tech {
            icon
            color
            label
          }
        }
      }
    }
  }
}

Expected Result

{
  "data": {
    "experience": {
      "edges": [
        {
          "node": {
            "company": "Company A",
            "position": "Unicorn Developer",
            "from": "Dec 2016",
            "to": "Present",
            "items": [
              {
                "label": "Responsibility",
                "description": "Being an unicorn",
                "tech": null
              },
              {
                "label": "Hands on",
                "description": null,
                "tech": [
                  {
                    "icon": "facebook",
                    "color": "teal",
                    "label": "React"
                  },
                  {
                    "icon": "server",
                    "color": "green",
                    "label": "NodeJS"
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  },
  "extensions": {}
}

Actual Result

Notice "tech": []

{
  "data": {
    "experience": {
      "edges": [
        {
          "node": {
            "company": "Company A",
            "position": "Unicorn Developer",
            "from": "Dec 2016",
            "to": "Present",
            "items": [
              {
                "label": "Responsibility",
                "description": "Being an unicorn",
                "tech": null
              },
              {
                "label": "Hands on",
                "description": null,
                "tech": []
              }
            ]
          }
        }
      ]
    }
  },
  "extensions": {}
}

Environment

System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.0 - ~/.nvm/versions/node/v14.18.0/bin/node
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 95.0.4638.54
    Firefox: 91.0.2
    Safari: 14.1.1
  npmPackages:
    gatsby: ^4.0.2 => 4.0.2
    gatsby-source-filesystem: ^4.0.0 => 4.0.0
    gatsby-transformer-json: ^4.0.0 => 4.0.0
  npmGlobalPackages:
    gatsby-cli: 4.0.0

Config Flags

No response

[LekoArts]

Hi!

You'll need to update your usage of mapping to make this work:

mapping: {
  'ExperienceJson.items.tech': `TechJson.jsonId`
}

I'll update the doc to update that and highlight again that people should use @link directive via schema customization instead: https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/#foreign-key-fields

So for your case this would be:

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions

  createTypes(`
    type ExperienceJsonItems {
      tech: [TechJson] @link(by: "jsonId")
    }
  `)
}

You can use __typename to get the names you need:

---

PR: #33799

[no-chris]

That worked like a charm for my use case, thanks a lot! 🙌🏻