Skip to content

Commit 4755483

Browse files
committed
Flesh out Code Splitting usage guide page
1 parent 7c90bfd commit 4755483

File tree

1 file changed

+66
-3
lines changed

1 file changed

+66
-3
lines changed

docs/rtk-query/usage/code-splitting.mdx

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,17 @@ description: 'RTK Query > Usage > Code Splitting: dynamic injection of endpoints
1010

1111
# Code Splitting
1212

13-
RTK Query makes it possible to trim down your initial bundle size by allowing you to inject additional endpoints after you've set up your initial service definition. This can be very beneficial for larger applications that may have _many_ endpoints.
13+
## Overview
1414

15-
`injectEndpoints` accepts a collection of endpoints, as well as an optional `overrideExisting` parameter.
15+
By default, an RTK Query API definition normally has all of the endpoint definitions in a single file. However, in larger applications this can result in very large files that may be harder to maintain. It also means that all of the relevant code is being imported right away.
1616

17-
Calling `injectEndpoints` will inject the endpoints into the original API, but also give you that same API with correct types for these endpoints back. (Unfortunately, it cannot modify the types for the original definition.)
17+
RTK Query allows dynamically injecting endpoint definitions into an existing API service object. This enables splitting up endpoints into multiple files for maintainability, as well as lazy-loading endpoint definitions and associated code to trim down initial bundle sizes. This can be very beneficial for larger applications that may have _many_ endpoints.
18+
19+
## Injecting Endpoints
20+
21+
`api.injectEndpoints` accepts a collection of endpoint definitions (same as `createApi`), as well as an optional `overrideExisting` parameter.
22+
23+
Calling `api.injectEndpoints` will inject the endpoints into the original API service object, modifying it immediately. It returns **the _same_ API service object reference**. If you're using TypeScript, the return value has the TS types for the new endpoints included. (Unfortunately, it cannot modify the types for the original API reference.)
1824

1925
A typical approach would be to have one empty central API slice definition:
2026

@@ -43,6 +49,7 @@ export const emptySplitApi = createApi({
4349
// file: extendedApi.ts
4450
import { emptySplitApi } from './emptySplitApi'
4551

52+
// NOTE: these are the _SAME_ API reference!
4653
const extendedApi = emptySplitApi.injectEndpoints({
4754
endpoints: (build) => ({
4855
example: build.query({
@@ -60,3 +67,59 @@ If you inject an endpoint that already exists and don't explicitly specify `over
6067
will not be overridden. In development mode, you will get a warning about this if `overrideExisting` is set to `false`,
6168
and an error will be throw if set to `'throw'`.
6269
:::
70+
71+
## Enhancing Endpoints
72+
73+
Sometimes you may also need to modify an existing API definition, such as adding additional tag types, or providing additional configuration options to a given endpoint.
74+
75+
`api.enhanceEndpoints` returns an updated and enhanced version of the API slice object, containing the combined endpoint definitions.
76+
77+
This is primarily useful for taking an API slice object that was code-generated from an API schema file like OpenAPI, and adding additional specific hand-written configuration for cache invalidation management on top of the generated endpoint definitions.
78+
79+
For example, `enhanceEndpoints` can be used to modify caching behavior by changing the values of `providesTags`, `invalidatesTags`, and `keepUnusedDataFor`:
80+
81+
```ts
82+
// file: api.ts noEmit
83+
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
84+
85+
export const api = createApi({
86+
baseQuery: fetchBaseQuery({ baseUrl: '/' }),
87+
endpoints: (build) => ({
88+
getUserByUserId: build.query({
89+
query() {
90+
return ''
91+
},
92+
}),
93+
patchUserByUserId: build.mutation({
94+
query() {
95+
return ''
96+
},
97+
}),
98+
getUsers: build.query({
99+
query() {
100+
return ''
101+
},
102+
}),
103+
}),
104+
})
105+
106+
// file: enhanceEndpoints.ts
107+
import { api } from './api'
108+
109+
const enhancedApi = api.enhanceEndpoints({
110+
addTagTypes: ['User'],
111+
endpoints: {
112+
getUserByUserId: {
113+
providesTags: ['User'],
114+
},
115+
patchUserByUserId: {
116+
invalidatesTags: ['User'],
117+
},
118+
// alternatively, define a function which is called with the endpoint definition as an argument
119+
getUsers(endpoint) {
120+
endpoint.providesTags = ['User']
121+
endpoint.keepUnusedDataFor = 120
122+
},
123+
},
124+
})
125+
```

0 commit comments

Comments
 (0)