More than 1 year has passed since last update.

apollo-clientと@apollo/clientは型が違う

Posted at 2022-02-11

はじめに

GraphQLをフロントから使用するとなると、Apolloを使用することが多いのかなと思います。
https://www.apollographql.com/

現在参画しているプロジェクトでは、NuxtとTypeScriptをメインに開発しており、
データ取得時はGraphQLを使用しております。

GraphQLを扱うため、ライブラリとしてApollo Client（@nuxtjs/apollo）を使用しております。

今回のプロジェクトではApolloClientを使用するためにクラスを作成しており、
型定義のためApolloClientの型を使用しております。

import { ApolloClient } from 'apollo-client'

が、、、

その際、import元が'apollo-client'か'@apollo/client'かによって、型の中身が若干異なることに気づきました。
そのことについて今回まとめてみようと思います。

// この二つは中身が異なる
import { ApolloClient } from 'apollo-client'
import { ApolloClient } from '@apollo/client'

NuxtでApolloを使用するにあたり、nuxtコミュニティのモジュール（@nuxtjs/apollo）を使用していました。
https://github.com/nuxt-community/apollo-module

ApolloClientを使用するためのクラスでは、
プロジェクトの関係でclientConfigs内に定義したエンドポイントを使い分けるために、
clientConfig内のどちらかのエンドポイントを使用するか引数で渡す設計となっていました。

new HogehogeProvider(this.$apolloProvider.clients.hoge)

$apolloProvider.clientsに合わせてこの引数には、ApolloClient型を指定しております。

しかし、なぜか起こる型エラー

型 'ApolloClient<any>' には 型 'ApolloClient<any>' からの次のプロパティがありません: store, writeData, initQueryManager

ApolloClient型でちゃんと渡しているのになぜなん、、、というのがきっかけ。

ApolloClientを'apollo-client'からimportするか、'@apollo/client'からimportするかによって型が若干異なるためでした。

実は、この対応の前にApolloClientのimport元を@apollo/clientからに変えておりました。

理由としては、ApolloClient 3.0では@apollo/clientを使用されるようになったと記載があったためです。
https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/#apollo-client

開発初期のプロジェクトのため、このタイミングで@apollo/clientにしてみようと思い変えておりました。

が、、、

@nuxtjs/apolloのgithubを見にいくと、clientsの型はApolloProvider型に含まれており、
ApolloProvider型はvue-apolloからimportされています。
https://github.com/nuxt-community/apollo-module/blob/83e46428540ca57dd84c99453a5e454dbc40946b/types/nuxt.d.ts#L6

2022/02月現在の@nuxtjs/apollo(4.0.1-rc.5)では、
vue-apolloのバージョンが3.0.5であり、このバージョンではapollo-clientからimportされているようです。

型の名前は同じものの、import元が異なりさらに型の中身も若干異なるため型エラーが起きておりました。

公式ドキュメントを参考にすると良い、というのはよく聞いておりましたが、githubも同時に良いのかなあと思いました。
最初はとても、読めるかなあ、、わかるかなあ、、という気持ちも強かったですが、型を見るだけでも得られるものがあったので今後も調べる時には参考にしようと思っています。

これは個人的な意見ですが、調べるときは以下のように切り分けています。

【新しく使う技術で、まだ何も知らないとき】
→ブログ記事をメインに参考にする。
理由：深く知るよりは、ざっくり概要を理解して調べやすくすることがこの段階では重要と思うため

【ある程度慣れてきて、エラー解決や自分がやりたいことを実現したいとき】
公式ドキュメント系をメインに参考にする。
理由：より深く知るために、より正確な情報がこの段階では重要と思うため

公式ドキュメントなどは英語の記事も多いので、⌘ + c + cで簡単に翻訳できるDeepLを使いつつ、
一旦深呼吸して「よっしゃやったる。」と内心思ってから始めることがマイルーティンです。