TL;DR
JavaScript 向けの状態管理ライブラリ。GraphQL を使ってローカルとリモートのデータを管理し、データの取得、キャッシュ、変更に合わせて UI を自動で更新する。
Apollo Client is a comprehensive state management library for JavaScript. It enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.
仕組み
ApolloClient の作成
ApolloClient のインスタンスを作り、利用するコンポーネントを <ApolloProvider> で囲む。client には作成した Client を渡す。
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
})link: 使用するすべての Link（後述）をconcatで連結して渡すcache: クエリの結果をキャッシュとして保存する
function App() {
return (
<ApolloProvider client={client}>
<RouterProvider router={router} />
</ApolloProvider>
)
}Query と Mutation の実行
Query と Mutation は、それぞれ useQuery と useMutation で実行する。
const { loading, error, data } = useQuery(gql`
query GetDogs {
dogs {
id
breed
}
}
`)
const [mutateFunction, { data, loading, error }] = useMutation(gql`
mutation IncrementCounter {
currentValue
}
`)Link
Link は、GraphQL サーバとの HTTP のリクエストとレスポンスの流れを制御するインタフェースである。ミドルウェアのように動き、リクエストの書き換えやレスポンスの処理、エラーハンドリングを担う。組み込みの Link には次のようなものがある。
HttpLink: HTTP で GraphQL のリクエストを送る。デフォルトで使われるonError: エラーをキャッチして処理するRetryLink: ネットワークエラーが起きたときにリクエストを再試行するBatchHttpLink: 複数のリクエストを 1 つのバッチにまとめて送る
import { onError } from "@apollo/client/link/error"
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.forEach(({ message, locations, path }) =>
console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
)
if (networkError) console.log(`[Network error]: ${networkError}`)
})カスタム Link も作れる。次の例は、認証トークンを Authorization ヘッダに付ける。
import { setContext } from "@apollo/client/link/context"
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem("authToken")
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : "",
},
}
})自分の理解
「包括的な状態管理ライブラリ」とは、状態管理にひととおり必要な機能がそろっているという意味だと理解している。
2022 年ごろからは、同じ機能を持ち REST API にも対応している TanStack Query が使われているイメージがある。
関数コンポーネントの外で Query や Mutation を実行したいときは、ApolloClient の query と mutate メソッドを使えばよさそうだ。