Apllo ClientでLocal State管理
serverから取得した値だけでなく、local stateも管理することで、同一のインターフェイスで一元化できまっせ！ということらしいmrsekut.icon
ここでのlocal stateというのは、Jotaiみたいなやつのこと
実際どうなのか知らないが、第一印象としては「使わないほうがええやろ」という気持ちになったmrsekut.icon
GPT-4.icon
どうやってローカル状態を扱うのか
Apollo Client 3系以降では、
「Field Policies」と「Reactive Variables」 という2つの仕組みが用意されています。
特定のフィールド（例：isLoggedInなど）に対して、
そのデータをどう取得するか、どう計算するか を定義できる仕組み。
普通はサーバー側のGraphQL Schemaに存在しないフィールドでも、
クエリの中に普通に書いてよくて、その値を自分たちで決められます。
▶️ 例：localStorageの値を使う
code:typescript
const client = new ApolloClient({
cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
isLoggedIn: {
read() {
return !!localStorage.getItem('token');
},
},
},
},
},
}),
});
この例だと、
isLoggedInというフィールドがクエリで使える
値はlocalStorageを見て決める
みたいな動きをします。
GraphQLクエリを書かずに、直接値を読み書きできる変数。
Apolloのキャッシュ（InMemoryCache）とは別に持てる。
値が変わると、それを使っているクエリが自動で再レンダリングされる。
▶️ 例：簡単なカウンター
code:typescript
import { makeVar } from '@apollo/client';
const counterVar = makeVar(0); // 初期値は0
counterVar(); // 読み取り: 0
counterVar(5); // 書き込み: 5
counterVar(); // 読み取り: 5
さらに、クエリの中でこれを読むようにフィールドポリシーを設定すれば、
カウンターをクエリで取得することもできるし、更新もできるようになります。
かなり、過剰な機能なように見えるmrsekut.icon
③（古い方法）Local Resolvers（ローカルリゾルバ）
Apollo Client 2.5で導入された仕組み。
サーバーと同じように、QueryやMutationの中に関数を定義してローカルのデータを返していた。
でも、3系ではField PoliciesとReactive Variablesが推奨で、Local Resolversは将来的に別モジュールに移す予定。
今から新しく書くなら、Field Policies + Reactive Variables を使うのがベストです。
Overview
Local-only fields
Reactive variables
Client-side schema
Local resolvers