Gatsby: Allow themes to modify existing GraphQL types

[wangyi7099]

I have a graphQL query like this:

export const pageQuery = graphql`
  query TemplateDocsMarkdown($slug: String!) {
    allMdx(
      sort: { fields: fields___slug, order: DESC }
      filter: { fields: { slug: { glob: "/docs/*" } } }
    ) {
      edges {
        node { 
          frontmatter {
            title
            type
            order
          }
        }
      }
    }
  }
`;

But if my md file doesn't have a frontmatter type . then gatsby will show the error:
Unknown field 'type' on type 'MdxFrontmatter'.

Can I get around this? Because I want to make this field optional in the frontmatter of each file.

[freiksenet]

Hi!

Take a look at schema customization docs.

For your use case, you would need something like the following:

createTypes(`
  type MdxFrontmatter @infer {
    type: String
  }

  type Mdx implements Node @infer {
    frontmatter: MdxFrontmatter
  }
`)

[wangyi7099]

Hi I followed the docs and use the createSchemaCustomization api in gatsby-node.js which doesn't work. And gatsby show the errors:
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?

This is my code, and I use it in a custom theme plugin:

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
  type MdxFrontmatter @infer {
    type: String
  }

  type Mdx implements Node @infer {
    frontmatter: MdxFrontmatter
  }
  `;
  createTypes(typeDefs);
};

[stefanprobst]

@wangyi7099 The createSchemaCustomization API is only available in Gatsby v2.12 and above. If you are using a different version, you can use sourceNodes instead of createSchemaCustomization.

[wangyi7099]

Thanks!
@freiksenet @stefanprobst I have updated to the lastest version and works properly!

[wangyi7099]

Hi. I have another problem just now..
When I change the plugin from gatsby-mdx to gatsby-plugin-mdx.. The code below still don't work.

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
  type MdxFrontmatter @infer {
    type: String
  }

  type Mdx implements Node @infer {
    frontmatter: MdxFrontmatter
  }
  `;
  createTypes(typeDefs);
};

And console still warns Unknown field 'subtitle' on type 'MdxFrontmatter'.

I have a look at both codes and noted the difference between gatsby-mdx and gatsby-plugin-mdx .

gatsby-mdx

Create type defination at sourceNodes hook.

gatsby-plugin-mdx

Create type defination at onCreateNode hook.

Is this caused by creating type at different hooks? Could you please give me some help? Thanks..

[stefanprobst]

• looks like you haven't provided a def for the subtitle frontmatter field?
• it is recommended to call createTypes from either the sourcesNodes API, or if you are using Gatsby 2.12+ the createSchemaCustomization API. The onCreateNode API is not a good place to do this because this would mean creating type defniitions every time a new node is added to the data layer.

[wangyi7099]

Hi! Sorry .. My code provided seems not complete, I just copy the above code, and the complete code is below:
createSchemaCustomization.js

module.exports = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type MdxFrontmatter @infer {
      type: String
      title: String
      subtitle: String
      disabled: Boolean
      link: String
      important: Boolean
    }

    type Avatar {
      href: String
      text: String
      src: String
    }

    type MdxFields @infer {
      avatarList: [Avatar]
    }

    type Mdx implements Node @infer {
      frontmatter: MdxFrontmatter
      fields: MdxFields
    }

    type SitePage implements Node @infer {
      context: SitePageContext
    }

    type SitePageContext @dontInfer  {
      webConfig: Json
    }
    `;
  createTypes(typeDefs);
};

[stefanprobst]

Is the repo public somewhere? I could take a closer look

[wangyi7099]

I have created a repo for this issue: link
Perhaps I use a theme?

[stefanprobst]

@wangyi7099 Thanks for the repo!

This is indeed an issue with themes. When running the project in the repo, you will see two warning messages printed:

warn Plugin `gatsby-issue-15544-theme` tried to define the GraphQL type `MdxFrontmatter`, which has already been defined by the plugin `gatsby-plugin-mdx`.
warn Plugin `gatsby-issue-15544-theme` tried to define the GraphQL type `Mdx`, which has already been defined by the plugin `gatsby-plugin-mdx`.

This means that the createTypes call in theme/gatsby-node does not actually modify the types.

This is because we don't allow just anyone to modify a type that already exists in the schema -- only plugins that own that type, or a user's gatsby-node are allowed to do that. What is missing is a way to also allow this for a theme's gatsby-node. I'll look into this.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[csr632]

I ran into this too

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜