はじめに
RTKQueryを使用する機会があり、備忘録も兼ねてまとめました。
メモ的に書いているためわかりづらい点についてはご了承ください。
RTKQueryとは
RTK（Redux ToolKit）の機能であり、データ取得とキャッシュを行ってくれるツールです。
なぜ必要か
RTK Queryを使用しない場合は読み込み状態やキャッシュされたデータの管理をするためにはかなりの量のロジックをかかなければならなかたっため、それらのロジックを簡素化したい場合に使用します。
API Slice
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",
}),
getAllAlbums: builder.query({
query: () => "/albums",
}),
}),
});
export const { useGetAllUserQuery, useGetAllAlbumsQuery } = apiSlice;
プロパティの概要
createApi
エンドポイントを定義するための関数です。
reducerPath
Reduxのstoreに登録されるreducerの名前を指定します。
Redux DevToolsなどでstateを識別する際に使用します。
store
storeはアプリケーション全体で共有されるstateを管理するためのオブジェクトです。
reducer
store内でstateを更新するための関数です。
createApi関数を実行することで自動的に生成されて、createApi関数の引数に指定したendpoinsを元にそれぞれのエンドポイントに対応するstateを生成してくれます。
baseQuery
APIリクエストを送信するための関数で、fetchBaseQuery関数を使用して生成されます。
fetchBaseQuery関数はfetch関数をラップした関数のため、fetch関数の引数と同じものを受け取ることができます。
endpoints
エンドポイントを定義するためのオブジェクトです。
APIのURLやリクエストメソッドを指定します。
データを取得したい場合は、build.query()を、データを更新したい場合はbuild.mutation()を指定します。
また、hooksはendpointsを元に自動で生成してくれます。
例：getAllUserを記述 → 自動でuseGetAllUserQueryを生成
エンドポイントではなく、自身で書いたロジックを用いてデータ取得を行いたい場合はqueryの代わりにqueryFn関数を指定します。例えば、firestoreからのデータ取得を行いたい場合などに使用します。
戻り値は、data または errorオブジェクトが返されることを期待されています。
endpoints: (builder) => ({
getCollection: builder.query<Collection, string>({
async queryFn(collectionId: string) {
try {
// こちらに処理を記載
// const ref = collection()
// ...略
return { data: data };
} catch (error) {
return { error: error };
}
},
}),
}),
injectEndpoints
createApi関数の第2引数に指定する関数です。
エンドポイントを追加するための関数を受け取り、その関数を実行してエンドポイントを追加します。
参考：https://qiita.com/kana-wwib/items/2928c395608aa4318acf#injectendpoints