React + GraphQLで通信エラーを確認する

ベストプラクティスはどうやってデバッグするのかはわからないですが、下記メモ。

query, mutationからerror変数を取得する

  // errorを確認してみる
  const { data: getSomething, loading, error } = useGetSomethingQuery({
    variables: {
      id,
    },
    fetchPolicy: 'no-cache',
  })
  console.log(error)

すると、 Error: Internal server error が発生していることがわかりました。

chromeのdeveloper toolsのネットワークでdebugMessageを確認する

該当するrequestのレスポンスを確認してみるとわかりました。

{"errors":[{"debugMessage":"Cannot return null for non-nullable field hogehoge...".","message":"Internal server error","extensions":...

API側でなんらか問題が発生していることがわかりました。以上。