RTK Query で取得したデータをキャッシュ前に操作したい
結論 transformResponse を使う transformResponse とは useQuery や useMutation のレスポンスを操作するための機能。 レスポンスが返ってきたタイミングで呼び出され、操作後の返り値をキャッシュデータとして用いることができる。 デフォルトだと取得した値をそのまま返している。（各引数の詳細についてはこちらを参照） function defaultTransformResponse( baseQueryReturnValue: unknown, meta: unknown, arg: unknown ) { return baseQueryReturnValue } export const someApi = createApi({ reducerPath: 'someApi', baseQuery: fetchBaseQuery({ ba
私の考えるReact Queryベストプラクティス
はじめに こんにちは。株式会社HRBrainでインターンをしている安井です。 この記事では今業務で採用しているReact Queryの特性を生かした設計を考察してまとめていきます。 本記事はHRBrain Advent Calendar 2022の24日目の記事です。 前提 本記事で使用するライブラリ等のversion React: v18.2.0 TypeScript: v4.9.3 React Query（TanStack Query）: v4.19.1 axios: v1.2.1 vite: v4.0.0 React Queryはv4から名前が変更されTanStack Queryとなりましたが、記事の中ではReact Queryと呼ぶこととします。 また、本記事で使用するコードは下記のレポジトリで公開しています。 React Queryとは React Query is often
HTTPヘッダーCache-Control stale-while-revalidateを理解する｜Next.js｜開発ブログ｜株式会社Nextat（ネクスタット）
こんにちは。タカギです。 先日は弊社のアイドルけいちゃんがNext.js12のMiddlewareについての記事を書いてくれました。 その記事からもわかるように、弊社でもフロントエンドにReactやNext.jsを採用することが増えてきています。 Next.jsを採用した場合、同じくVercelで開発されている SWR というReact Hooksライブラリを併せて使用することが多いのではないかと思います。 SWRの公式ドキュメントのトップページには以下の文章があります。 “SWR” という名前は、 HTTP RFC 5861 で提唱された HTTP キャッシュ無効化戦略である stale-while-revalidate に由来しています。 SWR は、まずキャッシュからデータを返し（stale）、次にフェッチリクエストを送り（revalidate）、最後に最新のデータを持ってくるという
Redux ToolitのRTK Queryについて - Qiita
RTK Queryおもしろそうなので調べてみたり触ってみたりした。 どちらかというと雰囲気を伝えることを目的とした記事で、勘違いしている可能性もあるかもしれないので(つっこんでほしい) 詳細については公式を読んでください。 対象 Reactを使ってるひと Reactでのデータ取得のキャッシュの扱いとか管理がしんどいなってひと Reduxは分からなくてもOK RTK Query is 何？ Redux Toolkitのチームが作ったデータ取得とキャッシングのためのツール。 データを取得するのが楽になる。キャッシュのロジックを手書きする必要がなくなる。 最近のReactコミュニティでは「データの取得とキャッシュ」は「状態管理」を別のものとして管理したいという需要があった。 → RTK Queryは「データの取得とキャッシュ」に特化したツール。(Reduxは「状態管理」に特化したツール) 実際の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Query vs RTK Query: A Comprehensive Comparison - Frontend Mag
RTK Query を実際にプロジェクトで使ってみた
Using Redux Tool Kit (RTK) Query With React Router V6
heroku-client/src/toolkitStore/index.js at 5bdfc879f6e02becf3bc33c1c0b9634498860c3d · Eagleheard/heroku-client
lmdvendor/src/redux/store.ts at f3e16ba63f3532c003231d74d073458d543e8fcf · BinovaGautam/lmdvendor
schulkin-advanced-react-testing/base-app/client/src/app/store/index.ts at 0d2eb23491220c6fc0a2868caff4d7d5ca477137 · orenkole/schulkin-advanced-react-testing
Popular-Music-Venue/base-app/client/src/app/store/index.ts at d5e591daf090ecd954c92c59ebf6c19440da0511 · skis630/Popular-Music-Venue