[Updated] How can I identify a referenced component's type?

[SabbeRubbish]

[Updated] See this comment for the up to date problem.

Reproduction

You can reproduce the issue with my repo https://github.com/SabbeRubbish/graphcms-bug-repro
Used GraphCMS and latest gatsby default starter.
Added to gatsby-config.js:

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions

  createNodeField({
    node,
    name: `BLAH`,
    value: "BLAH",
  })
}

Expected behaviour

ALL nodes get a fields object with BLAH as key and BLAH as value.

Actual behaviour

ALL nodes except GraphCMS nodes get the extra field:

But not the GraphCMS nodes:

Use case

I want to add an extra field "Type" so that I can distinguish on components' types. For example, I have a page with 2 modular components that I can place on them: section with image or testimonials. But in my page template I need to know which one is which, which is why I want to add a _type field to be able to distinguish.

Thanks for any help!

[raae]

This is probably because of a do not infer policy set by GraphCMS on the node's schema.

[raae]

Seems this is done by gatsby-graphql-source-toolkit that is used: https://www.npmjs.com/package/gatsby-graphql-source-toolkit#5-add-explicit-types-to-the-gatsby-schema

[SabbeRubbish]

Hi raae,

Thank you for your reply and useful insights.
That however does not solve my problem.

Let me elaborate a bit more, I have a Page in GraphCMS that has multiple types of modular components I can add:

When I source this into Gatsby, I see this in GraphiQL:

There is no way for me to identify which type of page section I'm dealing with:

And right now it's just two, but I'll be adding a lot more of them.

So either I find a way to add the internal content type of the referred component myself, or the the source plugin is updated to remediate this issue that others must also face someday or have faced already. I like GraphCMS just a bit too much right now to go find another CMS to do this with.

Many thanks for any help on this!

[karlwir]

Hi @SabbeRubbish

I faced the same issue when trying to map my modular content to react components. I ended up writing a custom resolver, it adds the remoteTypeName as a "component" field on my the contents types I add it to. Its exported from gatsby-node.ts

export const createResolvers: GatsbyNode["createResolvers"] = ({
  createResolvers,
}) => {
  const addComponentResolver = {
    component: {
      type: "String",
      resolve: (source: { remoteTypeName: any }) => {
        return source.remoteTypeName;
      },
    },
  };

  createResolvers({
    HygraphCMS_Block: addComponentResolver,
    HygraphCMS_Grid: addComponentResolver,
    HygraphCMS_GridColumn: addComponentResolver,
    HygraphCMS_Link: addComponentResolver,
    HygraphCMS_ButtonLink: addComponentResolver,
    ...any other type that needs the component field
  });
};

[SabbeRubbish]

Hi @karlwir,

Thank you for your response!
Works like a charm, but I would expect this type of behaviour to be built into the core of this module.
It's a good workaround for now, but every new component that is added to HyGraph would need a code update, which is not ideal.

[karlwir]

@SabbeRubbish

I agree 😊