From 2e6833f7b165462beb156ed7959a981413e8a85a Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Fri, 8 Dec 2023 11:16:34 +0000 Subject: [PATCH 1/3] tweak RTKQ without hooks section, and add note regarding memoization --- .../usage/usage-without-react-hooks.mdx | 29 +++++++++++++++---- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/docs/rtk-query/usage/usage-without-react-hooks.mdx b/docs/rtk-query/usage/usage-without-react-hooks.mdx index 70b642c36c..15c5fc27dd 100644 --- a/docs/rtk-query/usage/usage-without-react-hooks.mdx +++ b/docs/rtk-query/usage/usage-without-react-hooks.mdx @@ -24,23 +24,25 @@ With React hooks, this behavior is instead handled within [`useQuery`](../api/cr ```ts title="Subscribing to cached data" no-transpile // interact with the cache in the same way as you would with a useFetch...() hook -const {data, refetch, isLoading, isSuccess, /*...*/} = dispatch(api.endpoints.getPosts.initiate()) +const { data, refetch, isLoading, isSuccess /*...*/ } = await dispatch( + api.endpoints.getPosts.initiate() +) ``` ## Removing a subscription 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. -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. +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. 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). ```ts title="Unsubscribing from cached data" no-transpile // Adding a cache subscription -const result = dispatch(api.endpoints.getPosts.initiate()) +const promise = dispatch(api.endpoints.getPosts.initiate()) // Removing the corresponding cache subscription -result.unsubscribe() +promise.unsubscribe() ``` ## Accessing cached data & request status @@ -49,7 +51,7 @@ Accessing cache data and request status information can be performed using the ` :::caution -The `endpoint.select()` function creates a _new_ selector instance - it isn't the actual selector function itself! +The `endpoint.select(arg)` function creates a _new_ selector instance - it isn't the actual selector function itself! ::: @@ -62,6 +64,23 @@ const { data, status, error } = result 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. +### Memoization + +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`: + +```ts title="Creating a memoized selector creator" no-transpile +const createGetPostSelector = createSelector( + (id: string) => id, + (id) => api.endpoints.getPost.select(id) +) + +const selectGetPostError = createSelector( + (state: RootState) => state, + (state: RootState, id: string) => createGetPostSelector(id), + (state, selectGetPost) => selectGetPost(state).error +) +``` + ## Performing mutations [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. From c3ce98d2e28aa1a40a53aaafde3142fe18e5207c Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Fri, 8 Dec 2023 11:20:08 +0000 Subject: [PATCH 2/3] refetch is on the promise not the result --- docs/rtk-query/usage/usage-without-react-hooks.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/rtk-query/usage/usage-without-react-hooks.mdx b/docs/rtk-query/usage/usage-without-react-hooks.mdx index 15c5fc27dd..4b7964561c 100644 --- a/docs/rtk-query/usage/usage-without-react-hooks.mdx +++ b/docs/rtk-query/usage/usage-without-react-hooks.mdx @@ -23,10 +23,10 @@ Cache subscriptions are used to tell RTK Query that it needs to fetch data for a 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). ```ts title="Subscribing to cached data" no-transpile +const promise = dispatch(api.endpoints.getPosts.initiate()) +const { refetch } = promise // interact with the cache in the same way as you would with a useFetch...() hook -const { data, refetch, isLoading, isSuccess /*...*/ } = await dispatch( - api.endpoints.getPosts.initiate() -) +const { data, isLoading, isSuccess /*...*/ } = await promise ``` ## Removing a subscription From 61c54b299cbf18cbaf7cf6331bf9b454d6465de8 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Fri, 8 Dec 2023 12:09:55 +0000 Subject: [PATCH 3/3] tweak note about status flags --- docs/rtk-query/usage/usage-without-react-hooks.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/rtk-query/usage/usage-without-react-hooks.mdx b/docs/rtk-query/usage/usage-without-react-hooks.mdx index 4b7964561c..319e4a0f95 100644 --- a/docs/rtk-query/usage/usage-without-react-hooks.mdx +++ b/docs/rtk-query/usage/usage-without-react-hooks.mdx @@ -59,10 +59,10 @@ With React hooks, this behaviour is instead handled within [`useQuery`](../api/c ```ts title="Accessing cached data & request status" no-transpile const result = api.endpoints.getPosts.select()(state) -const { data, status, error } = result +const { data, isSuccess, isError, error } = result ``` -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. +Note that unlike with the auto-generated hooks, there is no `isFetching` flag, and the `isLoading` flag will be true if the status is pending, regardless of if there is already data. ### Memoization