コード分割

RTK Query を使用すると、初期サービス定義を設定した後に追加のエンドポイントを挿入できるため、初期バンドルサイズを削減できます。これは、非常に多くのエンドポイントを持つ可能性のある大規模なアプリケーションにとって非常に有益です。

injectEndpoints は、エンドポイントのコレクションと、オプションの overrideExisting パラメーターを受け入れます。

injectEndpoints を呼び出すと、エンドポイントが元の API に挿入されますが、これらのエンドポイントに対して正しい型を持つ同じ API も返されます。（残念ながら、元の定義の型を変更することはできません。）

一般的なアプローチとしては、空の中央 API スライス定義を 1 つ用意します。

TypeScript

基本設定

// Or from '@reduxjs/toolkit/query' if not using the auto-generated hooks
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// initialize an empty api service that we'll inject endpoints into later as needed
export const emptySplitApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}),
})

JavaScript

基本設定

// Or from '@reduxjs/toolkit/query' if not using the auto-generated hooks
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// initialize an empty api service that we'll inject endpoints into later as needed
export const emptySplitApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}),
})

そして、他のファイルで API エンドポイントを挿入し、そこからエクスポートします。そうすることで、エンドポイントが確実に挿入される方法で常にエンドポイントをインポートできます。

TypeScript

追加エンドポイントの挿入とエクスポート

import { emptySplitApi } from './emptySplitApi'

const extendedApi = emptySplitApi.injectEndpoints({
  endpoints: (build) => ({
    example: build.query({
      query: () => 'test',
    }),
  }),
  overrideExisting: false,
})

export const { useExampleQuery } = extendedApi

JavaScript

追加エンドポイントの挿入とエクスポート

import { emptySplitApi } from './emptySplitApi'

const extendedApi = emptySplitApi.injectEndpoints({
  endpoints: (build) => ({
    example: build.query({
      query: () => 'test',
    }),
  }),
  overrideExisting: false,
})

export const { useExampleQuery } = extendedApi

ヒント

既に存在するエンドポイントを挿入し、overrideExisting: true を明示的に指定しない場合、エンドポイントは上書きされません。開発モードでは、overrideExisting が false に設定されている場合、この点に関する警告が表示され、'throw' に設定されている場合はエラーがスローされます。