👹

【知らないと沼る】Hasura GraphQL + NestJS + Prismaでカラム・フィールド追加時の注意点と解決方法

2023/08/02に公開

GraphQL

概要

最近、個人開発等で少しつづHasura GraphQL + NestJSという技術スタックでバックエンドの開発を行っています。

今回はHasura GraphQLを用いたバックエンド開発の中で、新しいカラム・フィールドを追加した際に発生した問題とその状況および解決方法について詳しくお話しさせていただければと思います。

やったこと

1. Prismaのスキーマに追加

実際にDBのとあるテーブルに新しいカラムを追加したかったので、schema.prismaファイルをいじってDBにカラムを追加しました。

そしてprisma migrateコマンドでスキーマの変更を反映させます。

schema.prisma

model Test {
...
  newColumn String?
...
}

2. GraphQLのqueryを変更

続いて、1.で追加したカラムを含めた状態で特定のレコードデータが欲しかったので、GraphQLのクエリの変更を行いました。

query.gql

query Tests {
  hasura {
    comment {
      ...
      newColumn
    }
  }
}

3. codegenを実行

2.で書き換えたqueryを反映させるためにcodegenを実行します。

codegenについては以下の記事が大変わかりやすいので、ぜひご参照いただければと思います。

graphql-codegenを実行してTypeScriptの型を生成します。

graphql-codegen --config graphql/codegen.ts

また、今回は@graphql-codegen/typescript-react-apolloを使用してデータフェッチに使用するHooksも自動生成するようにしています。

@graphql-codegen/typescript-react-apolloに関しては以下の記事が大変わかりやすいのでぜひ参考にしてみてください。

エラー発生

上記の3.で生成したデータフェッチのHooksでのデータフェッチがうまくいっておらず、エラーが発生しました。

具体的には以下のような@graphql-codegen/typescript-react-apolloで生成されたカスタムフックスでのデータフェッチ部分で発生しました。

sample.tsx

export const SampleComponent = () => {
  const { data } = useTestQuery({
    fetchPolicy: 'cache-and-network',
    onCompleted: data => { ... },
    onError: error => console.error(error),
  })

  return (
    <div>
    ...
    </div>
  )
}

エラーの詳細について

今回発生したエラーの詳細は以下のようなものです。

client.js:1 ApolloError: field 'newColumn' not found in type: Test
    at new ApolloError (index.js:26:1)
    at eval (QueryManager.js:645:1)
    at both (asyncMap.js:16:46)
    at eval (asyncMap.js:9:57)
    at new Promise (<anonymous>)

 ...

hasura metadata applyもprisma migrateの実行もgraphql-codegenも行ったし、かなり謎だなと思ってました。

エラーの解決方法

このエラーはどうやらHasuraのコンソールで新しいカラムに対して追加で権限設定を行う必要がありました。

Hasuraではテーブルに対して権限設定できることは知っていたのですが、各カラムに対してもできることは知りませんでした。

カラムの権限設定のやり方

カラムの権限設定のやり方自体は至ってシンプルです。

Hasuraのコンソールで新しくカラムを追加したテーブルのページでPermissionタブを選択します。

今回はログインユーザーのページでデータフェッチしたかったのでUser権限のselectを選択します。

最後にColumn Select Permissionsを選択してカラムの権限を設定します。

権限設定が完了したら最後にhasura metadata exportコマンドでメタデータの更新を反映させます。

まとめ

今回自分が遭遇した現象はHasuraのことを知ってないと解決できない + あまりネット上に情報が転がっていなかったので、これからhasuraを始める人やはじめたての人のお役に立てると幸いです。

では、良いhasuraライフを🥳