How to create a gatsby schema in combination with gatsby fragments

Question

I am trying to define the correct schema for a gatsby graphql query so that it can return null (to make the content optional). From what I understand I need to predefine the schema in the gatsby-node.js file so that gatsby doesn't have to infer the type through the data. However I am not sure what the schema definition needs to be since we are using a gatsby fragment for querying the data. This is (part of) the query:

... on ContentfulWorkPage {
  comingSoon {
   id
   title
   image {
     fluid(quality: 92, maxWidth: 1280) {
       ...GatsbyContentfulFluid_withWebp_noBase64
     }
   }
   comingSoonText
  }
}

The problem is that I am not sure how to define the GatsbyContentfulFluid_withWebp_noBase64

what I am trying:

const types = `
    type ContentfulWorkPage implements Node {
      comingSoon: ComingSoon
    }

    type ComingSoon {
      id: String
      title: String
      comingSoonText: String
      image: Image
    }

    type Image {
      fluid: Fluid
    }

   type Fluid {
    quality: Int
    maxWidth: Int
    title: String
   }
  `
  createTypes(types)

even though I think I am on the right track I am still getting the following errors:

There was an error in your GraphQL query:

Unknown argument "quality" on field "fluid" of type "Image".

GraphQL request:70:21
69 |             image {
70 |               fluid(quality: 92, maxWidth: 1280) {
   |                     ^
71 |                 ...GatsbyContentfulFluid_withWebp_noBase64

File: src/templates/mainPages/work.js:105:21


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Unknown argument "maxWidth" on field "fluid" of type "Image".

GraphQL request:70:34
69 |             image {
70 |               fluid(quality: 92, maxWidth: 1280) {
   |                                  ^
71 |                 ...GatsbyContentfulFluid_withWebp_noBase64

File: src/templates/mainPages/work.js:105:34


 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Fragment "GatsbyContentfulFluid_withWebp_noBase64" cannot be spread here as objects of type "Fluid" can never be of type "ContentfulFluid".

GraphQL request:71:17
70 |               fluid(quality: 92, maxWidth: 1280) {
71 |                 ...GatsbyContentfulFluid_withWebp_noBase64
   |                 ^
72 |               }

Answer 1

So I managed to solve this after digging around in the gatsby documentation (https://www.gatsbyjs.com/docs/actions/#printTypeDefinitions). I found that inside the gatsby-node.js file you can use a printTypeDefinitions function to print your data types, which you can then use to pre define the optional properties:

exports.createSchemaCustomization= ({ actions }) => {
  actions.printTypeDefinitions({path: './typeDefs.txt'})
}

This will create a typeDefs.txt file in your root folder where all infered types are described. So if you are looking for more complicated type defs like I was so that they can be made optional in contentful you can:

• add some data to your optional field in contentful (or whatever backend/server you are using)
• use the function to get the type definitions out of the data
• copy whatever part you need out of the typeDefs file and
• use it in a createTypes function in the createSchemaCustomization

example (comingSoon definition was copied from the typeDevs file):

exports.createSchemaCustomization = ({ actions }) => {
  const contentfulSomePage = `
      type ContentfulSomePage implements Node {
        comingSoon: [ContentfulCaseComingSoon] @link(by: "id", from: "comingSoon___NODE")
      }

      type ContentfulCaseComingSoon implements Node @derivedTypes @dontInfer {
        title: String
        comingSoonText: String
        image: ContentfulAsset @link(by: "id", from: "image___NODE")
      }
  `
  actions.createTypes(contentfulWorkPage)
}

Extra tip: if you need to just specify one property to be optional but the rest can be infered. Remove the @dontInfer annotation and just copy the nullable property instead of copying the whole type from the file.