【React】GraphQL &Apollo Clientでの状態管理

REST API & Reduxの場合

グローバルストアにReduxを使ってコンポーネント間で状態管理します。

もしくは、最近はRecoilなども使われることも多いです。

GraphQLとApollo Clientの場合はグローバルな状態管理にcache or makeVar(もしくは、cacheとmakeVarを組み合わせて使うこともできる。)を使います。

あるコンポーネントで一度問い合わせを行うと、他のコンポーネントでは@をつけるだけでcacheから情報を取得できるようになります。

Reduxと似たようなことをApollo Client標準のcache機構を使えば実現できるというのが大きな特徴です。

cacheの更新のメカニズムは結構複雑で自分の知らないところでcacheが更新してしまったりする場合があります。（確実に自分の管理下でstateを管理したい場合はmakeVarを使うと良いでしょう。）

あるコンポーネントからデータを保存する場合に使います。

import { makeVar } from '@apollo/client'
interface User {
  name: string
}
export const userVar = makeVar<User[]>([])

import { makeVar } from '@apollo/client'

interface User {

name: string

}

export const userVar = makeVar<User[]>([])

const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
  userVar([...userVar(), { name: "太郎" }])
}

const handleSubmit = (e: FormEvent<HTMLFormElement>) => {

userVar([...userVar(), { name: "太郎" }])

}

スプレットで現在の値を展開した上で追加する値を付加するような形にすればmakeVarの値を更新できます。

他のコンポーネントでmakeVarからデータを取得する場合に使います。

import {　userVar } from '../cache'
import { useReactiveVar } from '@apollo/client'

const users = useReactiveVar(userVar); // ユーザーデータ取得こ

import {　userVar } from '../cache'

import { useReactiveVar } from '@apollo/client'

const users = useReactiveVar(userVar); // ユーザーデータ取得こ

useReactiveVarは、キャッシュから切り離されており、任意のデータ型や構造のデータを保持することができます。GraphQLをアプリケーションのどこからでも参照できるグローバルな管理を実現します。