[Updated] How can I identify a referenced component's type? about gatsby-source-graphcms HOT 6 OPEN

@SabbeRubbish

I agree 😊

from gatsby-source-graphcms.

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
  });
};

from gatsby-source-graphcms.

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

from gatsby-source-graphcms.

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

from gatsby-source-graphcms.

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!

from gatsby-source-graphcms.

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.

from gatsby-source-graphcms.