Apollo Client 2.5 の Local state management をソースコードを拝借して体感してみた in Vue

• 下記 2 つの Qiita の記事に刺激され、Apollo Client の Cache をいじってみようと思ったら、2019年2月27日に Apollo Client v2.5 がリリースされていて、 apollo-link-state が本体に吸収されたとかなんとか。
  • 世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita
  • vuexなし縛り。vueとapollo-link-stateでカウンター作成 - Qiita
• ちょこちょこハマりつつ動かすところまでいったのでメモ。

1. ゼロから書けない書かないオレはソースコードを入手

• Apollo Client 2.5 以前のアプリを探し、気に入った Todo アプリの下記ソースコードをダウンロードさせていただきました。
  • Local State with Apollo in Vue - CodeSandbox
• このソースコードは、 apollo-boost を利用しているので、下記のような状態らしい。
  • なので、そもそも、Apollo Client 2.5 対応とか言って書き換える必要がない！のかもしれない。

Apollo Boostを使っているのなら、何も変更する必要はありません。 Apollo Boostは、Apollo Clientの統合されたローカル状態処理を使用するように更新されました。つまり、apollo-link-stateは使用されなくなりました。舞台裏では、Apollo BoostのclientStateコンストラクタパラメータは、必要なローカル状態の初期化を直接Apollo Clientに送ります。
引用: Migrating from apollo-link-state by Google 翻訳

2. ESLint がうるさかったので無慈悲に削除

• こんな感じ？

3. Apollo Boost を削除

• Apollo Boost がいい感じにやってくれてしまっているらしいので削除する。
• 各ファイルで import { gql } from "apollo-boost" を import gql from "graphql-tag" に置き換えた。
• 下記を実行。(たしか。。)

npm uninstall --save apollo-boost

• ここ Apollo Boost migration　を参考にした。

4. 必要なライブラリをインストール

• たしかこんな感じ。

npm install --save apollo-cache-inmemory apollo-client graphql-tag

5. 修正

• 大きく書き換えるのは、 src/main.js 。詳細は ココ を参照。

• ここ Migrating from apollo-link-state を参考にした。

6. エヌ・ピー・エム・ランデブー (実行)

npm run dev

7. まとめ

• 自身のメモなので、端折っているところもある。
• こいつで、Cache の中を見てみる。

• 実行するだけなら

git clone https://github.com/high-u/local-state-with-apollo-in-vue.git
cd local-state-with-apollo-in-vue
npm install
npm run dev

以上