2020年以降のフロントエンド開発は、Apolloをステート管理に使う(by react)
実際どうなのかという話。正直、今更感ですが、それでもあまりまだそうでもなかったりしてるので。
※前提として、Apolloを使っているということは、要はGraphQLをバックエンドに持っているという意味である。
Apolloでステート管理は、思ったより現実的な使い方があると思っていて
ステート管理は今までならReduxが2015年ぐらいから普通に使われてきたが、それから取って代わるものがあまりなくて、もちろんあるにはあるのだが、結局Reduxが選択されてきたと思う。
で、今年の春ごろにやっとフックがリリースされて、そのおかげで小規模なものにはReduxを入れなくてもそれなりなコードで仕上げることができるようになった。
カスタムフックなどをうまく使えば、それこそReduxなしでちゃんとステート管理できる。
もちろん、使い方を間違えれば、スパゲティコードみたいなものができてしまうが。
それでは、本題として、Apolloをステート管理に使うということで
実際、かなりありだと思う。
Apollo３の導入動画
ロードマップ
例えば、開発中、特定の要素をページまたいで必要になってきたから、ステート管理したいなぁと。
簡単なものならもちろんフックで代用できるけど、結構大掛かり、具体的には通信が発生するデータをステート管理したいなど、フロントエンドのみで完結しないものを作るときがあるとする。
こんなときに、Reduxがあれば便利なんだけど、そもそも自分の場合、プライベートで開発するときは、間違いなくGraphQLを通信プロトコルに選択しているので、Apolloが候補に上がってくる。
Apolloが既に入った状態でステート管理が必要になるので、それはもはやApolloのクライアントキャッシュを使えば良い。これがステート管理に使えると考えて良いと思う。というのも、Reduxと同様のライフサイクルで利用する事が可能であるためだ。
また、Redux+apolloも可能である。参考までに
また、ローカルステートもapolloで巻き取れる。このあたりまでやってくれるのはすごい。
ほとんどは、バックエンドから何らかのデータを取得し、そのクエリ＋結果をApolloがクライアントキャッシュに入れ、別ページに移動してから、そのクライアントキャッシュからクエリを再取得することになる。
永続化したいのであれば、localStorageを使ってredux-storageみたいなものを自前で作るか、https://github.com/apollographql/apollo-cache-persist を使う。
また、React Nativeだろうと、Reactだろうとこのあたりの実装パターンは同様である。しかし、ブラウザとネイティブの挙動や仕様では差が出るのでその対応は書く必要が出てくる。
全体的に、最新バージョンだと昔と書き方が違うが、公式を読めば全部書いてあるので問題ないし、将来のアプデ時には、公式になければGitHubのissue or stackoverflow を漁ればほとんど書き方は見つかる。
基本的に一次情報を探せば解決可能。
詰まるとすれば、testingになると思う。
正直、自分もtestingにはかなり手こずった。
公式には書いてないし、apollo+mock+cache+testingなどの情報が古い。また、ハック的な書き方のサンプルコードも多く役に立ちそうにない。そういうものは別に自分でも書けるから。ちゃんとした作法に則ったような書き方があまり出てこない。githubの全文検索も出てこない。
おそらく使ってる人が少ないし、そのなかでtestingというテーマをprivateでやるというツワモノがいないのかもしれない。業務ではやると思うんだけど、業務だとあんまりpublicにできなくて広まっていないのかもしれない。
ということで、testingに詳しい人いましたら、参考リンクなどが知りたいなァと思ったり。
基本的にいつもこういう構成です。
- frontend
- react.js
- next.js
- typescript
- apollo client
- react testing library
- jest
- backend
- node.js
- express
- apollo server
versionは全部latestです。
また、これは自論ですが、ボイラーテンプレートを書くのが辛いという状況になってたら、大体かなりうまく言ってる状況であと一歩みたいなノリなので、次の施策を考えると良いと思う。新しいアーキテクチャを加えるとか、何らかの基盤を見直すチャンスというかそんな感じ。
Discussion