Redux Toolkit QueryでCustom BaseQueryを使用する方法

Redux Toolkit Query(RTK Query)でCustom BaseQueryを使用する方法

この記事ではRedux Toolkit QueryでCustom BaseQueryを使用する方法について記載します。

用途

以下のような用途で便利に使用できます。（他にもあると思いますが、私が使用した用途を例示）

• リクエストのURLなど基づいてなにか処理をしたい場合
• 全API共通のエラーハンドリングを実施したい場合

サンプルコード

customBaseQuery.ts

import {
  BaseQueryFn,
  FetchArgs,
  fetchBaseQuery,
  FetchBaseQueryError,
} from '@reduxjs/toolkit/query';

const baseQuery = (baseUrl: string) => fetchBaseQuery({ baseUrl });

export function customBaseQuery(
  baseUrl: string,
): BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> {
  return async (args, api, extraOptions) => {
    if (baseUrl.includes('user')) {
      console.log('url strings include user');
    }
    const result = await baseQuery(baseUrl)(args, api, extraOptions);
    if (result.error) {
      window.localStorage.href = '/error';
    }
    return result;
  };
}

sampleApi.ts

import { createApi } from '@reduxjs/toolkit/query/react';
import { customBaseQuery } from './baseQuery/customBaseQuery';

export const experimentalApi = createApi({
  reducerPath: 'experimental',
  baseQuery: customBaseQuery('/experimental'),
  tagTypes: ['experimental'],
  endpoints: (builder) => ({
    getExperimental: builder.query<[], string>({
      query: (id: string) => `/${id}`,
      providesTags: ['experimental'],
    }),
  }),
});

export const { useGetExperimentalQuery } = experimentalApi;

サンプルコードの解説

baseUrlには"/experimental"が設定
例えば、queryの引数をcustomBaseQuery内で取得したい時には、"args"から取得できます。
詳しい定義は公式ドキュメントを参考

エラーハンドリングの部分ですが、RTK QueryはデフォルトではfetchAPIベースになるので、axiosのようにHTTP statusコードが400などの場合はerrorをthrowしない点は気をつけてください。参考リンク（MDN）