Apollo Client
はじめに
Apollo Client は、Apollo 製の JS/TS 用 GraphQL クライアントライブラリ。サーバー側の実装には Apollo Server も存在するが、Apollo Client 単体でも利用できる。 利用する
Apollo Client は、以下のように、複数のオプションを連ねたオブジェクトを引数にとる。
code:ts
// 型定義
export default class ApolloClient<TCacheShape> implements DataProxy {
...
constructor(options: ApolloClientOptions<TCacheShape>);
...
}
// インスタンス化
this.client = new ApolloClient({
link: createHttpLink({ uri: config.endpoint }),
cache: new InMemoryCache()
});
required なオプションは link と cache であり、それ以外は任意。
watchQuery
指定されたオプションに従ってクエリのキャッシュストアを監視する。戻り値としては ObservableQuery を返す。この ObservableQuery をサブスクライブすると、キャッシュストアの更新時にその更新内容を受け取ることができる。
ただし、これは GraphQL でいう subscription の実装ではない。動的に結果を取得するために Apollo の保持領域を利用する機能となっている。 React Apollo では、<Query /> コンポーネントを利用してクライアントにアクセスするが、この際には Apollo Client の watchQuery メソッドを利用している。 ObservableQuery
result() 現在の結果を返す
refetch(variables) 現在のクエリで再取得し結果を格納する
fetchMore(fetchMoreOptions) 新しくクエリを発行し結果を格納する
合わせて読みたい