Gatsby: Extending Mdx nodes results in other fields (e.g. body, excerpt) not being available

[Mrtenz]

Description

I'm trying to extend the Mdx node type created by gatsby-plugin-mdx, with gatsby-node's createResolvers or createSchemaCustomization API. In either case, this results in the body and excerpt fields (as well as others) not being available on the Mdx node anymore.

Steps to reproduce

Simply adding a field to Mdx will cause it to break, e.g.:

export const createSchemaCustomization = async ({ actions: { createTypes } }) => {
  const typeDefs = `
    type Mdx implements Node {
      foo: String!
    }
  `;

  createTypes(typeDefs);
};

Expected result

I expect the new field foo to be available alongside all the other fields (like body and excerpt).

Actual result

The new field is available, but body, excerpt and other important field are not:

This results in errors when trying to query for these fields.

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "body" on type "Mdx".

Environment

  System:
    OS: Linux 5.7 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 3800X 8-Core Processor
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 12.16.1 - /tmp/yarn--1596878937010-0.33041929112915125/node
    Yarn: 1.22.4 - /tmp/yarn--1596878937010-0.33041929112915125/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Languages:
    Python: 3.8.5 - /usr/bin/python
  Browsers:
    Firefox: 79.0
  npmPackages:
    gatsby: ^2.24.36 => 2.24.36
    gatsby-plugin-canonical-urls: ^2.3.4 => 2.3.4
    gatsby-plugin-catch-links: ^2.1.25 => 2.3.5
    gatsby-plugin-favicons: ^1.0.4 => 1.0.4
    gatsby-plugin-git-clone: ^0.1.0 => 0.1.0
    gatsby-plugin-matomo: ^0.8.0 => 0.8.3
    gatsby-plugin-mdx: ^1.2.34 => 1.2.34
    gatsby-plugin-react-helmet-async: ^1.0.15 => 1.0.16
    gatsby-plugin-s3: ^0.3.3 => 0.3.3
    gatsby-plugin-sharp: ^2.4.5 => 2.6.11
    gatsby-plugin-sitemap: ^2.2.27 => 2.4.5
    gatsby-plugin-styled-components: ^3.1.19 => 3.3.4
    gatsby-plugin-ts-config: ^0.2.3 => 0.2.3
    gatsby-plugin-typescript: ^2.4.6 => 2.4.6
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^3.1.44 => 3.3.10
    gatsby-remark-static-images: ^1.2.1 => 1.2.1
    gatsby-source-filesystem: ^2.3.0 => 2.3.11
    gatsby-transformer-yaml: ^2.2.25 => 2.4.4

[blainekasten]

Ah! Close, Node is not from gatsby-plugin-mdx, that is our general utility for all graphql types. Everything inherits from Node. I personally have not spent a lot of time with MDX or our createSchemaCustomization API, but graphql generally lets you do something like this

 const typeDefs = `
    extend type Mdx {
      foo: String
    }
  `;

[Mrtenz]

Thanks for the reply. Using extend type results in the following error:

Missing onError handler for invocation 'building-schema', error was 'Error: Type kind "ObjectTypeExtension" not supported.'. Stacktrace was 'Error: Type kind "ObjectTypeExtension" not supported.
    at TypeMapper.makeSchemaDef (./node_modules/graphql-compose/lib/TypeMapper.js:671:15)
    at forEach (./node_modules/gatsby/src/schema/schema.js:1175:52)
    at Array.forEach (<anonymous>)
    at parseTypes (./node_modules/gatsby/src/schema/schema.js:1145:19)
    at forEach (./node_modules/gatsby/src/schema/schema.js:255:23)
    at Array.forEach (<anonymous>)
    at addTypes (./node_modules/gatsby/src/schema/schema.js:247:9)
    at updateSchemaComposer (./node_modules/gatsby/src/schema/schema.js:134:9)
    at buildSchema (./node_modules/gatsby/src/schema/schema.js:61:9)
    at build (./node_modules/gatsby/src/schema/index.js:105:24)
    at buildSchema (./node_modules/gatsby/src/services/build-schema.ts:19:3)'

The examples in the Gatsby docs use type [...] implements Node too (e.g. here and here).

[Mrtenz]

@blainekasten Any help with this would be appreciated.

[mshick]

I've run into the same issue. I was attempting to extend an existing type like this and got the same error. Would love to know what might be happening.

[mshick]

Seem to have found the answer in this issue. GraphQL compose, which is the underlying lib here, didn't support extend type until v7.5, and gatsby is currently using v6.3

Is there an effective way to modify an existing type, rather than generate a new one as most Gatsby examples show?

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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.
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! 💪💜

[Mrtenz]

Not stale, this is still an issue.

[csellis]

I'm experiencing this as well

[ascorbic]

Hi all,
While it's true that the extend syntax isn't supported, the original example should work: Gatsby merges type definitions. If it doesn't then that means it's a bug. To help us best begin debugging the underlying cause, it would be really helpful if you're able to create a minimal reproduction. Can you ensure that you're using the latest version of Gatsby and all of the plugins too, as we have made changes to type definition merging in the past few weeks.

Thanks!

[Mrtenz]

Looks like this was fixed in one of the updates. :+1: Using the following code, I was able to query foo, as well as body, excerpt, etc.

module.exports.createSchemaCustomization = ({ actions: { createTypes } }) => {
  const typeDefs = `
    type Mdx implements Node {
      foo: String!
    }
  `;

  createTypes(typeDefs);
};

module.exports.createResolvers = ({ createResolvers }) => {
  const resolvers = {
    Mdx: {
      foo: {
        resolve() {
          return 'bar';
        }
      }
    }
  };

  createResolvers(resolvers);
};