Skip to main content

Customizing createApi

Currently, RTK Query includes two variants of createApi:

  • createBaseApi, which contains only the UI-agnostic Redux logic (the core module)
  • createApi, which contains both the core and React hooks modules

You can create your own versions of createApi by either specifying non-default options for the modules or by adding your own modules.

Customizing the React-Redux Hooks#

If you want the hooks to use different versions of useSelector or useDispatch, such as if you are using a custom context, you can pass these in at module creation:

import * as React from 'react'import { createDispatchHook, ReactReduxContextValue } from 'react-redux'import {  buildCreateApi,  coreModule,  reactHooksModule,} from '@reduxjs/toolkit/query/react'
const MyContext = React.createContext<ReactReduxContextValue>(null as any)const customCreateApi = buildCreateApi(  coreModule(),  reactHooksModule({ useDispatch: createDispatchHook(MyContext) }))

Creating your own module#

If you want to create your own module, you should review the react-hooks module to see what an implementation would look like.

Here is a very stripped down version:

import { CoreModule } from '@internal/core/module'import {  BaseQueryFn,  EndpointDefinitions,  Api,  Module,  buildCreateApi,  coreModule,} from '@reduxjs/toolkit/query'
export const customModuleName = Symbol()export type CustomModule = typeof customModuleName
declare module '../apiTypes' {  export interface ApiModules<    BaseQuery extends BaseQueryFn,    Definitions extends EndpointDefinitions,    ReducerPath extends string,    TagTypes extends string  > {    [customModuleName]: {      endpoints: {        [K in keyof Definitions]: {          myEndpointProperty: string        }      }    }  }}
export const myModule = (): Module<CustomModule> => ({  name: customModuleName,  init(api, options, context) {    // initialize stuff here if you need to
    return {      injectEndpoint(endpoint, definition) {        const anyApi = (api as any) as Api<          any,          Record<string, any>,          string,          string,          CustomModule | CoreModule        >        anyApi.endpoints[endpoint].myEndpointProperty = 'test'      },    }  },})
export const myCreateApi = buildCreateApi(coreModule(), myModule())