vuex疲れ

普段からnuxt.jsやvue.jsを利用している方ならご存知かと思うのですが
vuexは複雑なデータ構造を渡すと
stateが更新されない事があります。

僕はそれが原因でしばらくvuex無しで
pagesのvueファイルで一枚岩に実装するなんて言う
ソースコードが腐る方法で実装していました。

しかし、そんな実装ではメンテナンス性が最悪である事も
当然、自覚はありました。

そろそろ、なんとかしなくてはと思うものの
やむなくvuexを利用するのはやはり違うという事で
自作でvuexに替わるプラグインを作る事にしました。

Resolved APIというプラグインを作った話

Resolved API(以下、rapi)
自作プラグインというのは大袈裟で
別に単にES6をふんだんに使ってパッケージ分割しただけです。

apiをcontextに流し込むメインのindex.jsとresolvers
resolversにはQuery、Mutation、client.js、cache.jsがあるのみです。
vuexとか、Apolloのcacheだとかは結構、複雑なアーキテクチャで構築されていますが
正直、独自にプラグインを作ると拍子抜けするほど
シンプルなアーキテクチャで作れてしまいます。

rapiは、
非常にシンプルで薄く柔軟なカスタマイズが可能なように作りました。
client.jsを編集する事でGraphQLにも、REST APIにも対応できます。

cacheへの読み書きは、デフォルトはjormというgormライクなcache ORMを使って行える
ようにしていますが
cacheに関しても、別にlowdbなどのapiに替える事もできます。

jormというcache ORMを作った話

rapiは完全にフロントエンドに埋め込まれたサーバーというコンセプトで設計しています。
なので、参考にしたアーキテクチャはgqlgenによって生成されるGraphQLサーバーのアーキテクチャです。

となると、DBであるcacheに読み書きするため
cache ORMというツールも必要になるでしょう。
という事で
gormを参考にjormというcache ORMも作りました。

GraphQLにもREST APIにも対応

上述もしている通りrapiは、client.jsを書き換えるだけで
GraphQLにも、REST APIにも対応できます。
(ES6は偉大ですね。)
gqlkitはGraphQLアプリを開発するためのフレームワークなので
gqlkitのrapiのデフォルトはGraphQLです。

なので、REST APIでの具体的な実装例として
resas apiを使った人口動態グラフの例も紹介しておきます。
(resas apiの認証トークンはアカウント登録して取得してください。)
https://github.com/inadati/total-population-trends-sample

まとめ

この、rapiというプラグインを使い始めてから
フロントエンドの実装が格段に楽になりました。
コンポーネント側のソースコードも全く汚染されません。
それもそのはずです。
「Resolved API」というのは

• サーバーからのデータの取得、書き込み
• キャッシュへのデータの書き込み、取得
• コンポーネント(クライアント)サイドに必要な形式へのデータの組み替え
• GraphQLの場合クエリの管理

などなど、文字通りあらゆる問題を「解決済み」としたAPIをコンポーネントに提供するわけです。
コンポーネント側では、ほとんど余計なことはしないで済むということです。

ちなみに一応、nuxt.jsのプラグインと言いましたが
別にcontextに、データストアを挿入可能なフレームワークであれば利用可能かと思います。
svelteでもできるかと
reactは不明
reactはコンポーネントとデータが密結合でよく分からないです。
reactはあまり深く触れたことなくてよく分かりません。