RTKQueryとは

はじめに

今年転職先で新たに遭遇したRTK Queryについてまとめました。
分かりにくい箇所もあるかと思いますがご了承ください🙇

RTK Queryとは

Redux Toolkitの公式アドオンであり、非同期通信の状態管理を劇的にシンプル化するツールです。
これまでReduxでAPI通信を扱う場合、以下のようなコードを書く必要がありました。

• fetchやaxiosを使ってAPIを呼び出す
• 成功・失敗のアクションをdispatchする
• ローディング状態やエラー状態をReduxストアで管理する

こうした一連の処理はボイラープレート（定型コード）が多く、開発効率を下げる原因となっていました。

RTK Queryは、これを宣言的なAPI定義だけで完結させることができます。

例：ユーザー詳細の取得（/api/users/${id})

api.ts

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

// APIサービスを定義
export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUser: builder.query<User, number>({
      query: (id) => `users/${id}`, // エンドポイント
    }),
    ・・・ // 他のAPIはこちらに追加していく
  }),
})

// Reactコンポーネントで使用できるようにエクスポート
export const { useGetUserQuery } = api

component.tsx

function UserDetail({ id }: { id: number }) {
  // RTKQueryから諸々取得
  const { data, error, isLoading } = useGetUserQuery(id)

  if (isLoading) return <p>Loading...</p>
  if (error) return <p>Error!</p>
  return <p>{data?.name}</p>
}

このように、API呼び出し、ローディング、エラー、キャッシュ管理までを自動で処理してくれるのがRTK Queryの最大の特徴です。

キャッシュについて

RTK Queryのキャッシュは非常に強力です。
APIを呼び出すと、リクエストのパラメータごとにキャッシュが作成されます。

const { data: user1 } = useGetUserQuery(1)
const { data: user2 } = useGetUserQuery(2)

上記の例では、/users/1 と /users/2 それぞれに独立したキャッシュが作られます。
同じクエリ（useGetUserQuery(1)）が再度呼ばれた場合は、ネットワークリクエストをスキップしてキャッシュを即返却します。

キャッシュの有効期限

RTK Queryでは、キャッシュが一定時間後に自動削除される仕組みがあります。

getUser: builder.query<User, number>({
  query: (id) => `users/${id}`,
  keepUnusedDataFor: 60, // デフォルトは60秒
}),

この keepUnusedDataFor は、データが使われなくなってから削除されるまでの時間（秒）を指定します。
コンポーネントがアンマウントされても、その間に再度同じクエリが呼ばれればキャッシュが再利用されます。

キャッシュの手動更新

データの更新（POST/PUT/DELETEなど）を行った際には、POST,PUT,DELETE側にinvalidatesTags と GETかわにprovidesTags を設定することで関連キャッシュを自動的に無効化できます。

endpoints: (builder) => ({
  getUsers: builder.query<User[], void>({
    query: () => 'users',
    providesTags: ['User'],
  }),
  updateUser: builder.mutation<User, User>({
    query: (user) => ({
      url: `users/${user.id}`,
      method: 'PUT',
      body: user,
    }),
    invalidatesTags: ['User'],
  }),
})

このように設定すると、updateUserが実行された際にgetUsersのキャッシュが無効化され、自動で再フェッチが行われます。

終わりに

RTKQueryの触りの部分だけではありますが、データフェッチとキャッシングをいい感じにしてくれるツールとしてまとめてみました！
他にも色々触れたい便利機能があるのですが、挙げるとキリがないのでまた別の機会にまとめられたらと思います！
https://redux-toolkit.js.org/rtk-query/overview

最後まで読んでいただきありがとうございました！🙏