How to create RTK-Query endpoint types when using codesplitting

user_2491669 0
Viewed 567

I'm currently building out an an rtk-query package for an application, where I am making use of code-splitting (by using injectEndpoints, since there will likely be hundreds of endpoints involved). However, I'd also like to implement a prefetch hook similar to the automatic prefetch hook in the docs.

Is there a way to generate proper Typescript types for these endpoints? The above hook defines the endpoint types as type EndpointNames = keyof typeof api.endpoints, however all my endpoints are defined like this (as described by the docs):

export const emptySplitApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: () => ({}), //
})

If this isn't possible, what's the best way to export multiple usePrefetch hooks from different injectEndpoints methods?

rtk-query typescript
2 Answers

I'd just export the full api object from each file and then be like api1.usePrefetch(), api2.usePrefetch().

That way you make also sure that the right file has been loaded, so it is injected. If you were to call that on the parent api, you could never be sure if the endpoint had already been injected.

user_20759440 
import { EndpointDefinitions } from '@reduxjs/toolkit/dist/query';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: API_BASE_URL }),
  endpoints: (): EndpointDefinitions => ({} as EndpointDefinitions),
});

I am late but this worked for me by casting return type of endpoints to EndpointDefinitions from rtk query.

user_111026750
Related