MENU

Code Splitting

After you have setup your initial service definition:

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

You can inject endpoints at a later stage with injectEndpoints():

(eg.) const extendedApi = emptySplitApi.injectEndpoints({ endpoints: (build) => ({ example: build.query({ query: () => 'test', }), }), overrideExisting: false, })

For larger applications that may have many endpoints, this can be beneficial, allowing you to trim down your initial bundle size.

The individual API slice endpoint definitions can also be split across multiple files. This is primarily useful for working with API slices that were code-generated from an API schema file, allowing you to add additional custom behavior and configuration to a set of automatically-generated endpoint definitions.

If you already have existing endpoint definitions, and want to merge them together on a per-definition basis with new definitions (ie. Object.assign(existingEndpoint, newPartialEndpoint))), you can use enhanceEndpoints() instead. const enhancedApi = api.enhanceEndpoints({ addTagTypes: ['User'], endpoints: { getUserByUserId: { providesTags: ['User'], }, patchUserByUserId: { invalidatesTags: ['User'], }, // alternatively, define a function which is called with the endpoint definition as an argument getUsers(endpoint) { endpoint.providesTags = ['User'] endpoint.keepUnusedDataFor = 120 }, }, }) Nothing will happen with enhanceEndpoints() if the endpoints did not exist before.