はじめに
今回は、rtkQueryを利用したAPIフェッチで、Postmanのモックサーバーから返却される値が、モックサーバーのレスポンスを編集したあとも編集前の値が返却されてしまう問題の解消法について書いていきたいと思います。
発生した環境
フロントエンド
- react native
- Redux toolkit
- rtkQuery
モックサーバー
- Postman
発生した問題・状況
- rtkQueryのhookから返却される
dataが、Postmanで構築されたモックサーバーのレスポンスをどれだけいじっても編集前から変わらない。 - curlで叩くとちゃんと編集後の値が返却される。
- アプリの再ビルド、シミュレーターの再起動を試しても編集前の値が返却される。
-
keepUnusedDataForなどのrtkQueryのキャッシュビヘイビアをいじっても何も変わらない。 - アプリ内でaxiosを用いて叩くとちゃんと編集後の値が返却される(その上、それ以降はrtkQueryで叩いてもしっかり編集後の値が返却される)
解決法
rtkQueryのヘッダーに"cache-control": "no-cache"(ないし"no-store")を追加する。
この場合においては"no-store"の方が適切かも。
蛇足 : この現象に遭った時の思考
rtkQueryのhookから返却される
dataが、Postmanで構築されたモックサーバーのレスポンスをどれだけいじっても編集前から変わらない。
Postmanのバグかと思い、curlなどで再現するかそう
curlで叩くとちゃんと編集後の値が返却される。
Postmanのバグではなさそう？ rtkQueryまたはシミュレーターの問題か？
アプリの再ビルド、シミュレーターの再起動を試しても編集前の値が返却される。
ここで本当に意味がわからなくなる(正直、今でもなぜ再ビルド・再起動してもそのままっだたのかわかってない)
仕方ないのでrtkQueryの設定を色々変えてみようかと思う
keepUnusedDataForなどのrtkQueryのキャッシュビヘイビアをいじっても何も変わらない。
rtkQueryだけいじっていても事態は好転しなさそうなので、axiosやfetch apiで試してみようと思い立つ
アプリ内でaxiosを用いて叩くとちゃんと編集後の値が返却される(その上、それ以降はrtkQueryで叩いてもしっかり編集後の値が返却される)
カッコ内の現象も相まってまさかの結果。シミュレーターやreact nativeの問題ではなさそうだったのでプロジェクト内のrtkQueryに関連するコードを見直す。
ヘッダーを設定する箇所があったので、まさかとは思いつつも"cache-control"を設定し解決に至る。