メインコンテンツへスキップ

生成されたAPIスライス

APIスライス概要​

createApiを呼び出すと、定義したエンドポイントとやり取りするために使用できるReduxロジックを含む、APIサービス「スライス」オブジェクト構造が自動的に生成され、返されます。このスライスオブジェクトには、キャッシュされたデータを管理するReducer、キャッシュの有効期間とサブスクリプションを管理するミドルウェア、各エンドポイントのセレクタとサンクが含まれています。React固有のエントリポイントからcreateApiをインポートした場合、コンポーネントで使用するための自動生成されたReactフックも含まれます。

このセクションでは、そのAPI構造の内容を、カテゴリ別にグループ化されたさまざまなフィールドとともに説明します。APIの型と説明は、カテゴリごとに別々のページに記載されています。

ヒント

通常、アプリケーションが通信する必要がある基本URLごとに、APIスライスは1つだけにする必要があります。たとえば、サイトが/api/postsと/api/usersの両方からデータを取得する場合、基本URLとして/api/を持つ単一のAPIスライスと、postsとusersの個別のエンドポイント定義を使用します。これにより、エンドポイント間でタグの関係を定義することで、自動再フェッチを効果的に利用できます。

保守性の観点から、エンドポイント定義を複数のファイルに分割し、これらのエンドポイントすべてを含む単一のAPIスライスを維持することをお勧めします。複数のファイルからAPIエンドポイントを単一のAPIスライス定義に注入する方法については、コード分割を参照してください。

APIスライスの内容
const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (build) => ({
    // ...
  }),
})

type Api = {
  // Redux integration
  reducerPath: string
  reducer: Reducer
  middleware: Middleware

  // Endpoint interactions
  endpoints: Record<string, EndpointDefinition>

  // Code splitting and generation
  injectEndpoints: (options: InjectEndpointsOptions) => UpdatedApi
  enhanceEndpoints: (options: EnhanceEndpointsOptions) => UpdatedApi

  // Utilities
  utils: {
    updateQueryData: UpdateQueryDataThunk
    patchQueryData: PatchQueryDataThunk
    prefetch: PrefetchThunk
    invalidateTags: ActionCreatorWithPayload<
      Array<TagTypes | FullTagDescription<TagTypes>>,
      string
    >
    selectInvalidatedBy: (
      state: FullState,
      tags: Array<TagTypes | FullTagDescription<TagTypes>>,
    ) => Array<{
      endpointName: string
      originalArgs: any
      queryCacheKey: string
    }>
    selectCachedArgsForQuery: (
      state: FullState,
      endpointName: EndpointName,
    ) => Array<QueryArg>
    resetApiState: ActionCreator<ResetAction>
    getRunningQueryThunk(
      endpointName: EndpointName,
      args: QueryArg,
    ): ThunkWithReturnValue<QueryActionCreatorResult | undefined>
    getRunningMutationThunk(
      endpointName: EndpointName,
      fixedCacheKeyOrRequestId: string,
    ): ThunkWithReturnValue<MutationActionCreatorResult | undefined>
    getRunningQueriesThunk(): ThunkWithReturnValue<
      Array<QueryActionCreatorResult<any>>
    >
    getRunningMutationsThunk(): ThunkWithReturnValue<
      Array<MutationActionCreatorResult<any>>
    >
  }

  // Internal actions
  internalActions: InternalActions

  // React hooks (if applicable)
  [key in GeneratedReactHooks]: GeneratedReactHooks[key]
}

Reduxとの統合​

内部的に、createApiはRedux ToolkitのcreateSlice APIを呼び出して、フェッチされたデータをキャッシュするための適切なロジックを持つスライスReducerと対応するアクションクリエイターを生成します。また、サブスクリプション数とキャッシュの有効期間を管理するカスタムReduxミドルウェアも自動的に生成します。

生成されたスライスReducerとミドルウェアの両方を、正しく機能させるために、configureStore内のReduxストア設定に追加する必要があります。

APIリファレンス

エンドポイント​

APIスライスオブジェクトには、内部にendpointsフィールドがあります。このセクションでは、createApiに提供したエンドポイント名を、データフェッチのトリガーと、そのエンドポイントのキャッシュされたデータの読み取りに使用されるコアReduxロジック（サンクとセレクタ）にマッピングします。React固有のバージョンのcreateApiを使用している場合、各エンドポイント定義には、そのエンドポイントの自動生成されたReactフックも含まれます。

APIリファレンス

コード分割と生成​

各APIスライスでは、初期APIスライスが定義された後に、実行時に追加のエンドポイント定義を注入できます。これは、非常に多くのエンドポイントを持つアプリケーションにとって有益です。

個々のAPIスライスエンドポイント定義は、複数のファイルに分割することもできます。これは主に、APIスキーマファイルからコード生成されたAPIスライスを操作する場合に役立ち、自動生成されたエンドポイント定義のセットに追加のカスタム動作と構成を追加できます。

各APIスライスオブジェクトには、これらのユースケースをサポートするinjectEndpoints関数とenhanceEndpoints関数があります。

APIリファレンス

APIスライスユーティリティ​

utilフィールドには、クエリキャッシュデータの手動更新、データの事前フェッチのトリガー、タグの手動無効化、api状態の手動リセットなど、キャッシュを管理するために使用できるさまざまなユーティリティ関数が含まれています。また、SSRを含むさまざまなシナリオで使用できる他のユーティリティ関数も含まれています。

APIリファレンス

内部アクション​

internalActionsフィールドには、フォーカスに基づいた更新の管理など、内部動作に使用される追加のサンクのセットが含まれています。

Reactフック​

コアRTK QueryのcreateApiメソッドは、ReduxコアライブラリやRedux Toolkitと同様に、UI非依存です。これらはすべて、どこでも使用できるプレーンなJSロジックです。

しかし、RTK Queryは、各エンドポイントのReactフックを自動生成する機能も提供します。これはReact自体に依存するため、RTK Queryは、その機能を含むカスタマイズされたバージョンのcreateApiを公開する代替エントリポイントを提供します。

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

React固有のバージョンのcreateApiを使用している場合、生成されたApiスライス構造には、Reactフックのセットも含まれます。これらのエンドポイントフックは、エンドポイントの定義方法に合わせて、api.endpoints[endpointName].useQueryまたはapi.endpoints[endpointName].useMutationとして使用できます。

同じフックは、Apiオブジェクトにも追加され、エンドポイント名とクエリ/ミューテーションの種類に基づいて自動生成された名前が付けられます。

たとえば、getPostsとupdatePostのエンドポイントがある場合、これらのオプションを使用できます。

生成されたReactフック名
// Hooks attached to the endpoint definition
const { data } = api.endpoints.getPosts.useQuery()
const { data } = api.endpoints.updatePost.useMutation()

// Same hooks, but given unique names and attached to the API slice object
const { data } = api.useGetPostsQuery()
const [updatePost] = api.useUpdatePostMutation()

React固有のバージョンのcreateApiは、ApiオブジェクトにアタッチされたusePrefetchフックも生成します。これは、事前にデータのフェッチを開始するために使用できます。

APIリファレンス
最終更新日