Gatsby: createSchemaCustomization for non-required image / contentful

[moscoding]

Summary

Hi there,

We are making website for online courses using Gatsby / Contentful. I stuck with createSchemaCustomization. The problem is that I have non-required field for image. So at http://localhost:8000/__graphql I get a link for courses with an image and null for courses, where I didn't upload any.

Here is my structure

logoForProfession { file { url } }

Now I have an error TypeError: Cannot read property 'file' of null.

So I thought that I should add type for image. I found about type File. But it didnt' work.

exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions;
const typeDefs = type ContentfulCourse implements Node { deadline: String, logoForProfession: File } ;
createTypes(typeDefs);
};

Then I found about nested types. And it didn't work neither.

exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions;
const typeDefs = type ContentfulCourse implements Node { deadline: String, logoForProfession: { file: { url: String } } } ;
createTypes(typeDefs);
};

What am I doing wrong?

Relevant information

Environment (if relevant)

File contents (if changed)

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

[moscoding]

My bad, just had to add a condition so it only tries to read file when the image exists.

[ehsantl]

Hey @moscoding
Would you mind sharing the final code snippet here? I'm having the exact same issue, thanks :)

[moscoding]

Hey @moscoding
Would you mind sharing the final code snippet here? I'm having the exact same issue, thanks :)

Hey, for us was helpful to dynamically render React components. I mean wrote if this image file is exist smth like
{your condition && (<img/>)} 😅

[ehsantl]

So I figured it out, if anyone ended up here.

In my case I had a File field which was Optional. when not provided at all, it was missing from GraphQL and was breaking my queries and there was no easy way to make it optional in the source code.

The correct, described way in Gatsby is:

gatsby-node.js

exports.createSchemaCustomization = ({ actions, schema, getNode }) => {
  actions.createTypes([
    schema.buildObjectType({
      name: "ContentfulRole",
      interfaces: ["Node"],
      fields: {
        fileURL: {
          type: "String!",
          resolve: (source, args, context, info) => {
            const file = context.nodeModel
              .getAllNodes({ type: "ContentfulAsset" })
              .find(file => file.id === source.file___NODE)
            return typeof file === "undefined" ? "" : file.file.url
          },
        },
      },
    }),
  ])
}

what it does: it creates fileURL field in ContentfulRole type - if File field is not empty it will be filled by contentful provided url otherwise it will be set as empty string.
fileURL always exists in the schema and it can be queried