RTK QueryのキャッシュキーをRedux DevToolsで確認する

RTK Queryのカスタムフックの引数をRedux DevToolsで確認してみました。

始めにcreateApi関数でAPIを作成します。
baseUrlにはダミーデータが取得できるURLを設定します。

apiSlice.ts

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const apiSlice = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://jsonplaceholder.typicode.com",
  }),
  endpoints: (builder) => ({
    getAllUser: builder.query({
      query: () => "/users",
    }),
  }),
});

export const { useGetAllUserQuery } = apiSlice;

次にstore.tsに記述を追加します。

store.ts

import { configureStore } from "@reduxjs/toolkit";
import { apiSlice } from "./apiSlice";

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});

最後にRTK Queryが自動生成したカスタムフックの呼び出し部分を記載します。
カスタムフックであるuseGetAllUserQueryの引数はキャッシュキーとして使用されます。データがキャッシュに存在しない場合は再取得されます。

ここではユーザー情報の取得処理のため、引数を「users」と指定します。

reduxPractice.tsx

import { useGetAllUserQuery } from "./apiSlice";

export const ReduxPractice = () => {
  const { data } = useGetAllUserQuery("users");

  return (
    <div>
      {data.map((d: any) => {
        return <div key={d.id}>{d.name}</div>;
      })}
    </div>
  );
};

Redux DevToolsで確認してみます。
すると、先ほど引数で設定した「users」はキーとして設定されていることがわかりました。

参考：
https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics#query-arguments-and-cache-keys

キャッシュから取得していることを確認する

同じキャッシュキーを使用して複数呼び出してみます。
先ほど作成したreduxPractice.tsxに追記します。

reduxPractice.tsx

import { useGetAllUserQuery } from "./apiSlice";

export const ReduxPractice = () => {
  const { data } = useGetAllUserQuery("users");
  + const { data: usersData } = useGetAllUserQuery("users");

  + console.log("data", data);
  + console.log("usersData", usersData);

  return (
    <div>
      {data.map((d: any) => {
        return <div key={d.id}>{d.name}</div>;
      })}
    </div>
  );
};

コンソールには2つの出力がされていますが、Redux Toolsでは1度しか呼び出されていないためコンソールに出力されているusersDataはキャッシュからの出力だということがわかります。