ApolloGraphQL ClientのエラーはIDを取得していないことが原因でした

困り毎

ただGraphQLロード時に不明なエラーが起きるようになってしまって困っていました。

まず症状としては、あるクエリを読み込んだ際にエラーとなってしまい、ページ遷移等ができなくなってしまいました。

エラーが発生していたの箇所はApolloGraphQLのエラーハンドラーの箇所です。
エラーハンドリングは公式ページに案内があります。

export default (
  // eslint-disable-next-line
  { graphQLErrors, networkError, operation, forward }: any,
  nuxtContext: Context
) => {
  console.log(graphQLErrors, networkError, operation, forward)
  console.trace()
...

上記の networkError に値がセットされ、ネットワークエラーとして処理されていました。

networkErrorを出力すると下記のようなエラーメッセージになります。

ApolloGraphQL Clientの「Store error: the application attempted to write an object with no provided id but the store already contains an id of Type:xx for this object.

なかなか特定できなかったのですが、エラーメッセージをよく読むと「特定のTypeについて保存ができない」という意味になっています。
どうやらある型の取得したデータをStoreしようとした際にIDが重複してしまっているようです。

原因特定

該当付近のGraphQLのクエリを見てみると、内部で呼んでいる他の型のIDを指定していませんでした。

Query {
  ID
  Name
  someType { ## ここにIDがない
     Name
   }
}

ApolloClientでもこの仕様についてエラーにするかWarningにするか長年議論が続いているようです。

今後同じようなエラーが出た際には注意します。

対処

今回の件ではクエリの生成にCodegenを使っています。
そのCodgenで必ずIDが指定されているかをチェックするLinterプラグインがあったのでこちらを利用するようにします。