Open2022/12/18にコメント追加6

【Hasura/codegen】codegenでの詰まりポイント

hasura

codegen

あ

前提: サーバーはHasura GraphQLクライアントはurql

codegenはパッケージのバージョンや環境の差異によってエラーが頻繁に出る(少し環境を変えただけでymlのタブ/スペースを変える必要がある等。ymlファイル自体も記法が厳しい)。

またGraphQL自体の日本語情報がやや少ない上、codegen+Hasuraとなるとそれに拍車がかかる。

各エラーの解決までの過程を備忘録的にまとめる

codegen実行時にGraphQLDocumentError: Cannot query field... エラーが出る

codegen.ymlファイルは以下の通り

overwrite: true
schema:
  - "https://xxxxxxxxxxxxxxxx/v1/graphql":
      headers:
        - "x-hasura-admin-secret": ${HASURA_GRAPHQL_ADMIN_SECRET}
documents: "graphql/*.graphql"
generates:
  graphql/generated.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-urql"
      - "typed-document-node"
    config:
      - skipTypename: false
      - withHooks: true
      - withHOC: false
      - withComponent: false
      - preResolveTypes: false
  ./graphql.schema.json:
    plugins:
      - "introspection"

headers周りのハイフンやインデントに注意。少しでもズレると正常に実行できない。

ケース1

以下のクエリでcodegenを実行したところ、画像のようなエラーが出た。

query MyQuery($bpm: String!, $uid: String!) {
  charts(where: { bpm: { _eq: $bpm } }) {
    charts_to_likes(where: { id_User: { _eq: $uid } }) {
      id
      id_Chart
      id_User
    }
    song_name
    id
    official_ranking_url
    effector
    lv
    bpm
  }
}

charts_to_likesはリレーション名であるが、「"charts" 型の "charts_to_likes" フィールドにクエリを実行できない」とのこと。(上記クエリは、tsファイル内で使用した際は正常に動作する)

以下の通りにcharts_to_likes周りを削除して実行した場合は問題なく成功する。

query MyQuery($bpm: String!, $uid: String!) {
  charts(where: { bpm: { _eq: $bpm } }) {
    song_name
    id
    official_ranking_url
    effector
    lv
    bpm
  }
}

ケース2

query MyQuery($uid: String!) {
  likes(where: { id_User: { _eq: $uid } }) {
    likes_to_charts {
      song_name
      id
      lv
      official_ranking_url
    }
  }
}

今度はrootに問題があると言われているため、ケース1のように修正しても引き続き上記画像と全く同じエラーが出る

query MyQuery($uid: String!) {
  likes(where: { id_User: { _eq: $uid } }) {
    id_User
  }
}

さらに細かく以下のqueryに修正しても上記画像と全く同じエラーとなった。

query MyQuery {
  likes {
    id
  }
}

(ここまで挙げたクエリは全てGraphiQL内で実行して正常に動作する)

likesテーブル自体に問題がありそうだ。

以下の記事を参照しながら問題を紐解いていく

直接参考になりそうな記事

直接的ではないが参考になりそうな記事

https://techlife.cookpad.com/entry/2021/03/24/123214

結論

読み込みに管理者権限が必要だが、ymlファイルにおいて秘密鍵の環境変数読み込み方法が間違っていたことが全ての原因。以下のように修正することで、問題は解決した。

overwrite: true
schema:
  - "https://sdvxdb-dev.hasura.app/v1/graphql":
      headers:
        - "x-hasura-admin-secret": "<%= ENV['HASURA_GRAPHQL_ADMIN_SECRET'] %>"

修正の際はこの記事を参考にした。(どこかのページを参考にした際、冒頭に挙げた表記で環境変数が読み込まれると書いてあった気がしたが、その情報源は間違っていた模様。あるいはハイフン表記だと記法が変わる？)

→間違ってた。権限は変更しても(画面上で反映されたように見えても)1分ほど反映されない同じ状態になってしまう。