Gatsby: [gatsby-node] How to add a custom field to an existing type?

[geocine]

Summary

I am trying to add a custom field to an existing type using an async resolver. I am not sure if I am doing the async resolver correctly but my issue now is , I am getting this error:

Error: Schema must contain uniquely named types but contains multiple types named "DevArticlesArticle"

Relevant information

I am trying to clean the body_html field using an async function and put it to body_html_clean . The DevArticlesArticle is from a gatsby-source that I have authored.

exports.createSchemaCustomization = ({ actions }) => {
  const { createFieldExtension, createTypes } = actions
  createFieldExtension({
    name: "body_html_clean",
    extend() {
      return {
        async resolve(source) {
          return await parse(source.body_html)
        },
      }
    },
  })
  createTypes(`
    type DevArticlesArticle implements Node {
      body_html_clean: String @body_html_clean
    }
  `)
}

Environment (if relevant)

  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Safari: 12.1.2
  npmPackages:
    gatsby: 2.13.25 => 2.13.25 
    gatsby-awesome-pagination: ^0.3.3 => 0.3.4 
    gatsby-plugin-emotion: ^4.0.6 => 4.1.2 
    gatsby-plugin-netlify: ^2.0.0 => 2.1.5 
    gatsby-plugin-purgecss: ^3.1.0 => 3.1.1 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.1.3 
    gatsby-plugin-sass: ^2.0.11 => 2.1.8 
    gatsby-plugin-sharp: ^2.0.5 => 2.2.11 
    gatsby-remark-images: ^2.0.1 => 2.0.6 
    gatsby-source-dev: ^0.1.2 => 0.1.4 
    gatsby-source-filesystem: ^2.0.1 => 2.1.9 
    gatsby-transformer-remark: ^2.1.1 => 2.6.14 
    gatsby-transformer-sharp: ^2.1.1 => 2.2.6 

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js:

exports.createSchemaCustomization = ({ actions }) => {
  const { createFieldExtension, createTypes } = actions
  createFieldExtension({
    name: "body_html_clean",
    extend() {
      return {
        async resolve(source) {
          return await parse(source.body_html) // parse is an actual existing function
        },
      }
    },
  })
  createTypes(`
    type DevArticlesArticle implements Node {
      body_html_clean: String @body_html_clean
    }
  `)
}

gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[stefanprobst]

Does your custom gatsby-source- plugin create nodes of type DevArticlesArticle? Or is DevArticlesArticle the type of a article field on a DevArticles type?

[geocine]

Does your custom gatsby-source- plugin create nodes of type DevArticlesArticle? Or is DevArticlesArticle the type of a article field on a DevArticles type?

I am not sure how to answer this question, but this how I query my gatsby-source-dev. Here is the plugin gatsby-source-dev

    {
      allDevArticles {
        edges {
          node {
            article {
              id
              slug
              body_html
            }
          }
        }
      }
    }

node is of type DevArticles while article is of type DevArticlesArticle

I wanted to customize this schema on a project where I use this gatsby-source-dev, I wanted to add a transformed body_html and call it body_html_clean.

[stefanprobst]

The following type definitions should work:

type DevArticles implements Node {
  article: DevArticlesArticle
}
type DevArticlesArticle {
  body_html_clean: String @body_html_clean
}

Only top-level types should implement the Node interface (and thus need implements Node). These are the types specified in the source plugin on the internal.type field. The field types just define the data shape and must not implement the Node interface.

[geocine]

Thanks! @stefanprobst that is very helpful. Now it is working.

[fasaas]

Hello!

Having a look at the current gatsby documentation, the setFieldsOnGraphQLNodeType has been deprecated in favor of createTypes but I am reaaaaally scratching my head around on this:
How do I extend all Nodes using the createSchemaCustomization API to add a custom field to all Nodes I don't know their names?

Context: I am developing a custom plugin for all the other front-ends that are using gatsby, and I'm looking forward to having it in one place instead of changing every graphql in each front-end