apollo-moduleを利用した際、mutation後に画面が更新されない場合

はじめに

graphqlのクライアントを選択する際、多くの方はapolloを選ばれると思います。Vue.js(Nuxt)を利用されている方は、nuxt-community/apollo-moduleを利用されるケースが多いのではないでしょうか。

これを利用した際、いわゆるREST APIでいうところの「index>new(create)>show>index」、あるいは「index>new(create)>index」といった形でリソースをmutation及び画面を更新すると、indexの画面でnew(create)したリソースが一覧に表示されない場合があります。

解決方法

以下の通り、apollo-moduleの呼び出しに対して、fetchPolicyを追加します。

デフォルトではこれがcache-firstとなっており、キャッシュが利用されてしまうため、直前のデータが画面に表示されたまま、new(create)後の更新がなされません。

no-cacheもしくはnetwork-onlyに指定することで、確実に画面が更新されるようになります。ただし、その分だけ通信（APIリクエスト）が発生するので、時と場合によって使い分けるようにするべきかと思いました。