Sharing endpoints between different createApi services

[joel-stewart]

Hi there,

We have been using RTK Query for a while now (enjoying it) but have been unable to solve a design issue.

We have the following setup (Lerna packages):

/apps
   appA
   appB

/packages
   /api
      endpointsA
      endpointsB
      endpointsC

We would like to achieve a setup in which apps can import needed endpoints. For example, we would like to create an ApiSlice for use in App A that includes Service A and Service C and another ApiSlice for use in App B that includes Service A and Service B.

Thus far we have been unable to figure out how to do this, the primary issue is the typing. Something like the following works
functionality but the typing does not stay intact.

  // App A

  import { endpointsA, endpointsC } from 'api-package'

  export const apiService = createApi({
    reducerPath: 'api',
    baseQuery: getBaseQuery, // Custom base query
    endpoints: () => ({})
  })

  export const appAService = apiService.injectEndpoints({
    endpoints: (build) => ({
      ...endpointsA(build),
      ...endpointsC(build)
  })

  // App B

  import { endpointsA, endpointsB } from 'api-package'

  export const apiService = createApi({
    reducerPath: 'api',
    baseQuery: getBaseQuery, // Custom base query
    endpoints: () => ({})
  })

  export const appBService = apiService.injectEndpoints({
    endpoints: (build) => ({
      ...endpointsA(build),
      ...endpointsB(build)
  })

  // API Package

  // The below won't work because typing infomation is lost and we cannot type the build method
  export const endpointsA = (build) => ({
    endpointOne: build.query<EndpointOneType, void>({
      query: () => ({
        url: '/endpoint-one',
      })
    }),
    endpointTwo: build.query<EndpointTwoType, void>({
      query: () => ({
        url: '/endpoint-two',
      })
    })
  })

  export const endpointsB = (build) => ({
    endpointThree: build.query<EndpointThreeType, void>({
      query: () => ({
        url: '/endpoint-three'
      })
    }),
    endpointFour: build.query<EndpointFourType, void>({
      query: () => ({
        url: '/endpoint-four'
      })
    })
  })

The issue with the above and all other approaches we have tried (including passing the createApi service instead of build) are that we lose all typing information and there does not appear to be an easy way to type the service or build methods.
Are we going about this the wrong way? Is there a better way? We would like to avoid generating our APIs up front if possible
(via something like OpenApi) as it seems unnecessary for our use-case.

[phryneas]

The answer is the same one as always: ^^

Use one api.

Make an empty api one in your main file, use that in all your applications. Then use our documented code splitting approach to have multiple extra files for your endpoints.

Only the endpoints in these files you import in your final apps will make it into those apps.

[joel-stewart]

I see what you mean, so import the endpoint files (which will include the apiService.injectEndpoints) directly from the apps instead of trying to frankenstein them into a single api in the api-package.

This makes perfect sense, as I thought I was approaching this incorrectly.

Thanks so much for the response @phryneas !