はじめに
urqlとは:React向けの軽量で柔軟なGraphQLクライアントライブラリ
その中でもcache-updates
についてのアウトプットです
大事なのは__typename
ミューテーションで更新があった場合、__typename
を理解して
勝手にキャッシュを更新してくれます。
ですので、更新などのコマンドが操作された時に
BFFからIDのみを返すのではなくて__typename
が入ったスキーマの形を返してあげると、
データ更新後の取得をフロントが気にする必要がなくなります。
BFF内で更新+取得を行い該当の__typename
の型で返してあげることを意識するということです。
これができるとフロントで無駄なstate管理をする機会が減り、
謎のコンポーネント間のバケツリレーをする必要がなくなります。
失敗の思い出
BFFのservice内でコマンドのAPIを作成しているときに、
コマンドのAPIはコマンドしか呼ばずにIDだけを返そう。
画面更新するまでに即時反映しないデータはその時だけuseState
でバケツリレーして
useEffect
で更新してあげよう。
という取り決めをしたことがありました。
そしたらどうでしょう。
遠くから更新の処理でやってきたstateが下から上まで通って渡らなくてはいけなくなったり
一番上のtemplateで多くのstateを持たなくてはいけなくなるなど
保守がとんでもなく大変なことになりました。
これはなぜスキーマが__typename
を持っているのかなどキャッシュについて理解が足りていなかったことが問題だったなと今では思います。
今でもその保守に追われております
さいごに
せっかくGraphQL
でurql
を採用しているのにキャッシュの機構を理解しないのは勿体無いなと思い
改めてドキュメントを読んでいるところです。
ここら辺は相手に説明できるくらいである必要があると感じているのでしっかり知識として取り入れたいです。