microCMS + Gatsby + TypeScript TIPS

mimi 2022/05/23に更新

環境（抜粋）

"gatsby": "^4.13.1",
"typescript": "^4.6.4"
"gatsby-plugin-typegen": "^2.2.4",
"gatsby-source-microcms": "^2.0.0",

microCMS側でコンテンツが空という状態が有り得るので、null check入れようとしたら、空の場合はGatsbyでGraphQL自体が生成されなくてThere was an error in your GraphQL queryエラーが出るので其の対応方法を模索。

Gatsby側で未定義になっているgraphqlのschemaをcreateTypesを使って定義してあげればいいみたい。
例えばmicroCMSの場合は、

gatsby-node.ts

export const createSchemaCustomization: GatsbyNode['createSchemaCustomization'] = async ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type MicrocmsSomething implements Node {
      // ここに定義
    }
  `
  createTypes(typeDefs)
}

で良いぽいけどallMicrocmsSomthing自体が無いときはどうしたらいいのかまだ不明

参照

https://teratail.com/questions/275418

mimi 2022/05/24に更新

例えばmicroCMSでsampleという項目をオプションにしていて、custom fieldがある項目だと下記のエラーが出る

There was an error in your GraphQL query:

Cannot query field "sample" on type "MicrocmsSomething".

このとき内部で

[typegen] An error on codegen Cannot read property
'forEach' of undefined

  TypeError: Cannot read property 'forEach' of undefined

というのが出るので、入れ子にならない項目なら空でもエラーにならないみたい。

なので、

gatsby-node.ts

export const createSchemaCustomization: GatsbyNode['createSchemaCustomization'] = async ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type MicrocmsSomething implements Node {
      sample: MicrocmsSomethingSample
    }
    type MicrocmsSomethingSample {
      fieldId: String
      html: String
    }
  `
  createTypes(typeDefs)
}

のように設定してあげるとエラー回避できる。めんどくさい。

typegenを切ったほうが良いのかもしれないけど、graphqlのtype手で書くとかもっとあり得ない気がする。

mimi 2022/05/26に更新

↑結局、全部空の時も上と同じように設定が必要。めんどい。