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, useDispatch and useStore, such as if you are using a custom context, you can pass these in at module creation:

import * as React from 'react'
import {
createDispatchHook,
createSelectorHook,
createStoreHook,
ReactReduxContextValue,
} from 'react-redux'
import {
buildCreateApi,
coreModule,
reactHooksModule,
} from '@reduxjs/toolkit/query/react'

const MyContext = React.createContext<ReactReduxContextValue | null>(null)
const customCreateApi = buildCreateApi(
coreModule(),
reactHooksModule({
hooks: {
useDispatch: createDispatchHook(MyContext),
useSelector: createSelectorHook(MyContext),
useStore: createStoreHook(MyContext),
},
})
)

Customizing createSelector for RTKQ

Both coreModule and reactHooksModule accept a createSelector option which should be a selector creator instance from Reselect or with an equivalent signature.

import * as React from 'react'
import { createSelectorCreator, lruMemoize } from '@reduxjs/toolkit'
import {
buildCreateApi,
coreModule,
reactHooksModule,
} from '@reduxjs/toolkit/query/react'

const createLruSelector = createSelectorCreator(lruMemoize)

const customCreateApi = buildCreateApi(
coreModule({ createSelector: createLruSelector }),
reactHooksModule({ createSelector: createLruSelector })
)

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 {
BaseQueryFn,
CoreModule,
EndpointDefinitions,
Api,
Module,
buildCreateApi,
coreModule,
} from '@reduxjs/toolkit/query'

export const customModuleName = Symbol()
export type CustomModule = typeof customModuleName

declare module '@reduxjs/toolkit/query' {
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())