はじめに
記事を書く時間があまり取れなくて文書としては薄い内容になってしまったのですがどうかご容赦ください(´；ω；｀)
サンプルコードもありません。
しかし以下の内容は今私が一番注目している内容になります。
何卒よろしくおねがいします。
港での騒ぎ
Apolloを使えばReduxが消せるって話は港ではとてもホットな話題です。
つまり、Vue.jsを使っている場合、そのエコシステムがVue.jsでも使えるのならば、Vuexを消せるのと同じぐらいのインパクトがあります。
どうせまたまたなんか言ってんなー。どうせ無理だろ〜〜〜と思ってた時期が私にもありました。
しかしそれが現実になっているのでこんな時代がVue.jsにも来るかもしれないということを共有しようかと思います。
「React + Apollo Client (GraphQL) により変化するアプリケーション設計」
先日node fesでこのような内容が発表されました。
内容はスライドを見て頂けるとわかるのですが、reduxが消えてApolloに完全に置き換わっています。
とある例だと移行によりコードは3000行以上減っています。
これは凄い！Vue.jsでも同じようなことが起こるのか！？そう、起こります。
注目すべきはgraph qlの仕様とそれを活かしたのQueryコンポーネントとlink-stateです。
なぜRedux、Vuexが消せるのか
graph qlではqueryには厳格なルールがあります。
つまり、Aコンポーネントはこのリソースのこの条件に対して関心があるのがわかります。
では、Bコンポーネントがそのリソースを更新するqueryを発行した場合、Aコンポーネントのデータはそれに伴い一緒に変更されるべきです。
でないと画面上のデータに不整合が発生しちゃいますよね。
Apolloだけを使ってquery操作をすることにより、Apolloはクライアント上の全ての状態を把握できます。(ローカル変数もどきも管理できるので、データソース以外の値も管理できる
では、変更があったらHoge.subscribeとかで値を捕まえないと行けないのかというと、そうではなくQueryコンポーネントというのがあります。
これは、vue-apolloにも用意されています。
そう、全てのデータがslot-scopeで受け取れるので、その辺のバインドのコードも書かなくて良いんです！なんて素晴らしい！！！
つまり
Apolloを使うとRedux, Vuex等が消せるだけじゃなく、ReactとVue.jsの状態管理やデータソースとのやり取りの仕方がほぼ一緒になります！
React畑だから、Vue.js畑だから設計が違いすぎてわからない！ということも減ります！
しかも従来と比べてコード行数が超減ります！
ちなみにかのAirbnbもApolloを導入しています。
https://medium.com/airbnb-engineering/how-airbnb-is-moving-10x-faster-at-scale-with-graphql-and-apollo-aa4ec92d69e2
期待していること
firebaseのfirestoreもcollectionやdocのパスが示すリソースは常に同じです。
schemaもそうでしょう。
なので、firestore用のQueryコンポーネントならず、firestoreコンポーネントが誕生しないか期待しています。
または、firestoreがgraphqlに対応しないかなーとか。
喋る言語は同じgraphqlです。
まとめ
結局は常に正しいデータを少ない労力で確実に扱いたいだけなので、apolloじゃなくてもrestでもなんでも同じ事ができますう。
rest版のrest componentみたいなの作ればきっとイケるでしょう。reduxやvuex使っても全然いけます。
しかし、その辺のできの良さやエコシステムはapolloも凄く、またVue.jsがとても大切にしているDXもApollo Queryコンポーネントはとても高いでしょう。
しかし、Flux系storeが勝ち残る可能性も凄く高いので、これからどうなるのか楽しみです。
自分の予想としては既存の資産で作られているのと流用する必要があるのはReduxやVuexでやって、新規プロダクトはGraphQL + Apolloに寄るのかなぁと思ってます。
最後に
状態管理の戦国時代が来る予感がしています。。。