You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is a standard redux middleware and is responsible for things like [polling](../concepts/polling), [garbage collection](#keepunuseddatafor) and a handful of other things. Make sure it's [included in your store](../introduction/getting-started#add-the-service-to-your-store).
65
-
66
-
#### reducer
67
-
68
-
A standard redux reducer that enables core functionality. Make sure it's [included in your store](../introduction/getting-started#add-the-service-to-your-store).
69
-
70
-
### `endpoints` returned by `createApi`
71
-
72
-
#### actions
73
-
74
-
React Hooks users will most likely never need to use these in most cases. These are redux action creators that you can `dispatch` with `useDispatch` or `store.dispatch()`.
75
-
76
-
:::note Usage of actions outside of React Hooks
77
-
When dispatching an action creator, you're responsible for storing a reference to the promise it returns in the event that you want to update that specific subscription. To get an idea of what that entails, see the [Svelte Example](../examples/svelte) or the [React Class Components Example](../examples/react-class-components)
78
-
:::
79
-
80
-
#### select
81
-
82
-
`select` is how you access your `query` or `mutation` data from the cache. If you're using Hooks, you don't have to worry about this in most cases. There are several ways to use them:
83
-
84
-
```js title="React Hooks"
85
-
const { data, status } =useSelector(api.getPosts.select());
86
-
```
87
-
88
-
```js title="Using connect from react-redux"
89
-
constmapStateToProps= (state) => ({
90
-
data:api.getPosts.select()(state),
91
-
});
92
-
connect(null, mapStateToProps);
93
-
```
94
-
95
-
```js title="Svelte"
96
-
$: ({ data, status } =api.getPosts.select()($store));
97
-
```
98
-
99
-
#### hooks
100
-
101
-
Hooks are specifically for React Hooks users. Under each `api.endpoint.[endpointName]`, you will have `useQuery` or `useMutation` depending on the type. For example, if you had `getPosts` and `updatePost`, these options would be available:
102
-
103
-
```ts title="Hooks usage"
104
-
const { data } =api.endpoints.getPosts.useQuery();
105
-
const { data } =api.endpoints.updatePost.useMutation();
106
-
107
-
const { data } =api.useGetPostsQuery();
108
-
const [updatePost] =api.useUpdatePostMutation();
109
-
```
110
-
111
25
### `baseQuery`
112
26
113
27
```ts title="Simulating axios-like interceptors with a custom base query"
@@ -161,12 +75,13 @@ const apiTwo = createApi({
161
75
162
76
### `serializeQueryArgs`
163
77
164
-
Accepts a custom function if you have a need to change the serialization behavior for any reason. Defaults to:
78
+
Accepts a custom function if you have a need to change the creation of cache keys for any reason. Defaults to:
165
79
166
80
```ts no-compile
167
-
function defaultSerializeQueryArgs(args:any, endpoint:string) {
@@ -198,9 +113,18 @@ Endpoints are just a set of operations that you want to perform against your ser
198
113
2.`[{ type: 'Post' }]`- equivalent to 1
199
114
3.`[{ type: 'Post', id: 1 }]`
200
115
-`invalidates`_(optional)_
116
+
201
117
- Used by `mutations`for [cache invalidation](../concepts/mutations#advanced-mutations-with-revalidation) purposes.
202
118
- Expects the same shapes as `provides`
203
119
120
+
-`onStart`, `onError` and `onSuccess`_(optional)_
121
+
- Can be used in`mutations`for [optimistic updates](../concepts/optimistic-updates).
122
+
-```ts title="signatures"
123
+
function onStart(arg: QueryArg, mutationApi: MutationApi<ReducerPath, Context>): void;
124
+
function onError(arg: QueryArg, mutationApi: MutationApi<ReducerPath, Context>, error: unknown): void;
125
+
function onSuccess(arg: QueryArg, mutationApi: MutationApi<ReducerPath, Context>, result: ResultType): void;
126
+
```
127
+
204
128
#### How endpoints get used
205
129
206
130
When defining a key like `getPosts` as shown below, it's important to know that this name will become exportable from `api` and be able to referenced under `api.endpoints.getPosts.useQuery()`, `api.endpoints.getPosts.initiate()` and `api.endpoints.getPosts.select()`. The same thing applies to `mutation`s but they reference `useMutation` instead of `useQuery`.
@@ -279,6 +203,102 @@ export const api = createApi({
This is a standard redux middleware and is responsible for things like [polling](../concepts/polling), [garbage collection](#keepunuseddatafor) and a handful of other things. Make sure it's [included in your store](../introduction/getting-started#add-the-service-to-your-store).
246
+
247
+
#### reducer
248
+
249
+
A standard redux reducer that enables core functionality. Make sure it's [included in your store](../introduction/getting-started#add-the-service-to-your-store).
250
+
251
+
### `endpoints` returned by `createApi`
252
+
253
+
#### initiate
254
+
255
+
React Hooks users will most likely never need to use these in most cases. These are redux action creators that you can `dispatch` with `useDispatch` or `store.dispatch()`.
256
+
257
+
:::note Usage of actions outside of React Hooks
258
+
When dispatching an action creator, you're responsible for storing a reference to the promise it returns in the event that you want to update that specific subscription. Also, you have to manually unsubscribe once your component unmounts. To get an idea of what that entails, see the [Svelte Example](../examples/svelte) or the [React Class Components Example](../examples/react-class-components)
259
+
:::
260
+
261
+
#### select
262
+
263
+
`select` is how you access your `query` or `mutation` data from the cache. If you're using Hooks, you don't have to worry about thisin most cases. There are several ways to use them:
264
+
265
+
```js title="React Hooks"
266
+
const { data, status } = useSelector(api.getPosts.select());
267
+
```
268
+
269
+
```js title="Using connect from react-redux"
270
+
const mapStateToProps = (state) => ({
271
+
data: api.getPosts.select()(state),
272
+
});
273
+
connect(null, mapStateToProps);
274
+
```
275
+
276
+
```js title="Svelte"
277
+
$: ({ data, status } = api.getPosts.select()($store));
278
+
```
279
+
280
+
#### hooks
281
+
282
+
Hooks are specifically for React Hooks users. Under each `api.endpoint.[endpointName]`, you will have `useQuery` or `useMutation` depending on the type. For example, if you had `getPosts` and `updatePost`, these options would be available:
283
+
284
+
```ts title="Hooks usage"
285
+
const { data } = api.endpoints.getPosts.useQuery();
286
+
const { data } = api.endpoints.updatePost.useMutation();
287
+
288
+
const { data } = api.useGetPostsQuery();
289
+
const [updatePost] = api.useUpdatePostMutation();
290
+
```
291
+
292
+
#### action matchers
293
+
294
+
These are action matchers for each endpoint to allow you matching on redux actions for that endpoint -for example in slice `extraReducers` or a custom middleware. Those are implemented as follows:
React users are able to take advantage of auto-generated hooks. By default, `createApi` will automatically generate type-safe hooks (TS4.1+ only) for you based on the name of your endpoints. The general format is `use(Endpointname)(Query|Mutation)`-`use` is prefixed, the first letter of your endpoint name is capitalized, then `Query` or `Mutation` is appended depending on the type.
Defaults to `60`_(this value is in seconds)_. This is how long RTK Query will keep your data cached for**after** the last component unsubscribes. For example, if you query an endpoint, then unmount the component, then mount another component that makes the same request within the given time frame, the most recent value will be served from the cache.
0 commit comments