[RED-15] Sharing a set of endpoints between the two `Api`s?

[eric-crowell]

Hello,
I would like to define a set of endpoints I can use between two Api types. That way, if I need to alter or change those endpoints, I only need to modify it once for both Apis

For instance, I am looking to make some modules like so:

- src/
- - todo/
- - - todoEndpoints.ts # Set of endpoints for both `todoApi.ts` and `todoApiReact.ts`
- - - todoApi.ts # @reduxjs/toolkit/query
- - - todoApiReact.ts # @reduxjs/toolkit/query/react

I'd import and use the endpoints in a way like so:

// todoApiReact.ts
import { createApi } from '@reduxjs/toolkit/query/react';
import { todoEndpoints } from './todoEndpoints.ts';

export const todoApiReact = createApi({
   // ...
   endpoints: todoEndpoints,
});

I'm imagining the endpoints module could look something like this:

import type {
  EndpointBuilder,
  BaseQueryFn,
} from '@reduxjs/toolkit/query';

export const todoEndpoints = <T extends EndpointBuilder<BaseQueryFn, string, string>>(
  builder: T,
) => ({
   createTodo: builder.mutation</** ... */>(/** ... */),
   readTodo: builder.query</** ... */>(/** ... */),
});

For my case, it would be especially useful if I could apply React hooks to my non-react api. Maybe like const myReactApi = reactifyApi(myApi);. Maybe that is already possible?

I understand I can create individual definitions with EndpointDefinition(s), but it doesn't save time if I want to add new endpoints. Might be something I'm missing. How would one best share the same endpoints?

_RED-15

[markerikson]

This feels like two separate requests:

• Extract endpoint definitions outside of createApi
• Add React hooks to an already created API instance

(Remember that endpoint definitions don't know anything about hooks - it's the createApi module definition looking at the endpoints and doing something additional with those definitions.

We've had some requests for the ability to add React hooks from a UI-agnostic API instance, and there's an early POC over at #4128 .
For extracting endpoints, your current snippet looks pretty plausible - is there something about that that doesn't work right now?