Skip to content

Commit 2e6833f

Browse files
committed
tweak RTKQ without hooks section, and add note regarding memoization
1 parent 70c1c5c commit 2e6833f

File tree

1 file changed

+24
-5
lines changed

1 file changed

+24
-5
lines changed

docs/rtk-query/usage/usage-without-react-hooks.mdx

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,25 @@ With React hooks, this behavior is instead handled within [`useQuery`](../api/cr
2424

2525
```ts title="Subscribing to cached data" no-transpile
2626
// interact with the cache in the same way as you would with a useFetch...() hook
27-
const {data, refetch, isLoading, isSuccess, /*...*/} = dispatch(api.endpoints.getPosts.initiate())
27+
const { data, refetch, isLoading, isSuccess /*...*/ } = await dispatch(
28+
api.endpoints.getPosts.initiate()
29+
)
2830
```
2931

3032
## Removing a subscription
3133

3234
Removing a cache subscription is necessary for RTK Query to identify that cached data is no longer required. This allows RTK Query to clean up and remove old cache data.
3335

34-
The result of dispatching the [`initiate`](../api/created-api/endpoints.mdx#initiate) thunk action creator of a query endpoint is an object with an `unsubscribe` property. This property is a function that when called, will remove the corresponding cache subscription.
36+
The result of dispatching the [`initiate`](../api/created-api/endpoints.mdx#initiate) thunk action creator of a query endpoint is a Promise with an `unsubscribe` property. This property is a function that when called, will remove the corresponding cache subscription.
3537

3638
With React hooks, this behavior is instead handled within [`useQuery`](../api/created-api/hooks.mdx#usequery), [`useQuerySubscription`](../api/created-api/hooks.mdx#usequerysubscription), [`useLazyQuery`](../api/created-api/hooks.mdx#uselazyquery), and [`useLazyQuerySubscription`](../api/created-api/hooks.mdx#uselazyquerysubscription).
3739

3840
```ts title="Unsubscribing from cached data" no-transpile
3941
// Adding a cache subscription
40-
const result = dispatch(api.endpoints.getPosts.initiate())
42+
const promise = dispatch(api.endpoints.getPosts.initiate())
4143

4244
// Removing the corresponding cache subscription
43-
result.unsubscribe()
45+
promise.unsubscribe()
4446
```
4547

4648
## Accessing cached data & request status
@@ -49,7 +51,7 @@ Accessing cache data and request status information can be performed using the `
4951

5052
:::caution
5153

52-
The `endpoint.select()` function creates a _new_ selector instance - it isn't the actual selector function itself!
54+
The `endpoint.select(arg)` function creates a _new_ selector instance - it isn't the actual selector function itself!
5355

5456
:::
5557

@@ -62,6 +64,23 @@ const { data, status, error } = result
6264

6365
Note that unlike the auto-generated query hooks, derived booleans such as `isLoading`, `isFetching`, `isSuccess` are not available here. The raw `status` enum is provided instead.
6466

67+
### Memoization
68+
69+
Because the `endpoint.select(arg)` function returns a new selector each time it's called, and because this instance itself is memoized, it can be desirable to memoize the creation of a selector (for example, to then use that memoized instance in another selector). This can be done with `createSelector`:
70+
71+
```ts title="Creating a memoized selector creator" no-transpile
72+
const createGetPostSelector = createSelector(
73+
(id: string) => id,
74+
(id) => api.endpoints.getPost.select(id)
75+
)
76+
77+
const selectGetPostError = createSelector(
78+
(state: RootState) => state,
79+
(state: RootState, id: string) => createGetPostSelector(id),
80+
(state, selectGetPost) => selectGetPost(state).error
81+
)
82+
```
83+
6584
## Performing mutations
6685

6786
[Mutations](./mutations.mdx) are used in order to update data on the server. Mutations can be performed by dispatching the result of the [`initiate`](../api/created-api/endpoints.mdx#initiate) thunk action creator attached to a mutation endpoint.

0 commit comments

Comments
 (0)