Search code examples
typescriptrtk-query

How to create RTK-Query endpoint types when using codesplitting

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?

Solution

  • 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.