【Apollo Client】Reactive variablesとは

Apollo Client の Reactive variables（リアクティブ変数）について調べた

www.apollographql.com

Reactive variablesは、Apollo Client が提供する状態管理の仕組みの一つ

グローバルなクライアントサイドの状態を管理するために使われる

基本的な使い方

1. Reactive variableの定義

makeVar を使って変数を作成する

これはグローバルな状態として扱われる

import { makeVar } from '@apollo/client';

// 初期値を設定してReactive variableを作成
const counterVar = makeVar(0);

2. 値の取得

Reactive variable は関数としても使える

値を取得するためにはそのまま呼び出せばよい

console.log(counterVar()); // 0

3. 値の更新

新しい値を渡すことでReactive variableの値を更新できる

counterVar(counterVar() + 1); // 値を1増やす
console.log(counterVar()); // 1

4. リアクティング

名前の通り、Reactive variable はアプリケーション内でリアクティブな変更をトリガーできる

Reactive variable の値を変更するたびに、その変数に依存するクエリが更新され、アプリケーションの UI がそれに応じて更新される

useReactiveVarフックを使用すると、useReactiveVarからReactive variable の値を読み取り、変数が次に更新されたときに React コンポーネントが再レンダリングできるようになる

import { makeVar, useReactiveVar } from "@apollo/client";
export const cartItemsVar = makeVar([]);

export function Cart() {
  const cartItems = useReactiveVar(cartItemsVar);
  // ...

まとめ

• Reactive variablesはApollo Clientのキャッシュやサーバーと関係なく使える
• ReduxやContext APIを使用せずに、シンプルな状態管理が可能
• ReactコンポーネントはReactive variableの変更を即座に感知して再レンダリングされる