Skip to content

Commit f17724e

Browse files
committed
📝 Update various ssr/rehydration documentation
1 parent 32c82c5 commit f17724e

File tree

3 files changed

+36
-9
lines changed

3 files changed

+36
-9
lines changed

docs/rtk-query/api/created-api/miscellaneous-utils.mdx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Each API slice object has `getRunningOperationPromises` and `getRunningOperation
2424
#### Signature
2525

2626
```ts no-transpile
27-
const getRunningOperationPromises: () => Array<Promise<unknown>>
27+
getRunningOperationPromises: () => Array<Promise<unknown>>
2828
```
2929

3030
#### Description
@@ -43,11 +43,17 @@ await Promise.all(api.getRunningOperationPromises())
4343
#### Signature
4444

4545
```ts no-transpile
46-
const getRunningOperationPromise: <EndpointName extends QueryKeys<Definitions>>(
46+
getRunningOperationPromise: <EndpointName extends QueryKeys<Definitions>>(
4747
endpointName: EndpointName,
4848
args: QueryArgFrom<Definitions[EndpointName]>
4949
) =>
5050
| QueryActionCreatorResult<Definitions[EndpointName]>
51+
| undefined
52+
53+
getRunningOperationPromise: <EndpointName extends MutationKeys<Definitions>>(
54+
endpointName: EndpointName,
55+
fixedCacheKeyOrRequestId: string
56+
) =>
5157
| MutationActionCreatorResult<Definitions[EndpointName]>
5258
| undefined
5359
```
@@ -57,5 +63,6 @@ const getRunningOperationPromise: <EndpointName extends QueryKeys<Definitions>>(
5763
A function that returns a single promise for a given endpoint name + argument combination,
5864
if it is currently running. If it is not currently running, the function returns `undefined`.
5965
60-
This enables writing custom hooks that look up if RTK Query has already got a running promise
66+
This is primarily added to add experimental support for suspense in the future.
67+
It enables writing custom hooks that look up if RTK Query has already got a running promise
6168
for a certain endpoint/argument combination, and retrieving that promise to `throw` it.

docs/rtk-query/usage/persistence-and-rehydration.mdx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,24 @@ for fulfilled & errored queries.
1717

1818
See also [Server Side Rendering](./server-side-rendering.mdx).
1919

20+
:::info
21+
22+
Generally, persisting API slices is not recommended and instead, mechanisms like
23+
[`Cache-Control` Headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)
24+
should be used in browsers to define cache behaviour.
25+
Persisting and rehydrating an api slice might always leave the user with very stale data if the user
26+
has not visited the page for some time.
27+
Nonetheless, in environments like Native Apps, where there is no browser cache to take care of this,
28+
persistance might still be a viable option.
29+
30+
:::
31+
2032
## Redux Persist
2133

2234
API state rehydration can be used in conjunction with [Redux Persist](https://github.com/rt2zz/redux-persist)
2335
by leveraging the `REHYDRATE` action type imported from `redux-persist`. This can be used out of the
24-
box with the `autoMergeLevel1` or `autoMergeLevel2` [state reconcilers](https://github.com/rt2zz/redux-persist#state-reconciler),
25-
but not with the `hardSet` reconciler.
36+
box with the `autoMergeLevel1` or `autoMergeLevel2` [state reconcilers](https://github.com/rt2zz/redux-persist#state-reconciler)
37+
when persisting the root reducer, or with the `autoMergeLevel1` reconciler when persisting just the api reducer.
2638

2739
```ts title="redux-persist rehydration example"
2840
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

docs/rtk-query/usage/server-side-rendering.mdx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,28 @@ The workflow is as follows:
2626

2727
[examples](docblock://query/createApi.ts?token=CreateApiOptions.extractRehydrationInfo)
2828

29+
An example repo using `next.js` is available [here](https://github.com/phryneas/ssr-experiments/tree/main/nextjs-blog).
30+
2931
:::tip
3032
While memory leaks are not anticipated, once a render is sent to the client and the store is being
3133
removed from memory, you may wish to also call `store.dispatch(api.util.resetApiState())` to
3234
ensure that no rogue timers are left running.
3335
:::
3436

35-
An example repo using `next.js` is available [here](https://github.com/phryneas/ssr-experiments/tree/main/nextjs-blog).
37+
:::tip
38+
In order to avoid providing stale data with Static Site Generation (SSG), you may wish to set
39+
[`refetchOnMountOrArgChange`](../api/createApi.mdx#refetchonmountorargchange) to a reasonable value
40+
such as 900 (seconds) in order to allow data to be re-fetched if it has been that long (in seconds) since
41+
the page was generated.
42+
:::
3643

3744
## Server Side Rendering elsewhere
3845

3946
If you are not using `next.js`, and the example above cannot be adapted to your SSR framework,
40-
an `unstable__` marked approach is available to support SSR scenarios that render the full tree
41-
multiple times until nothing changes any more. Doing so might require async code to be triggered
42-
during render and not safely in an effect.
47+
an `unstable__` marked approach is available to support SSR scenarios where you need to execute
48+
async code during render and not safely in an effect.
49+
This is a similar approach to using [`getDataFromTree`](https://www.apollographql.com/docs/react/performance/server-side-rendering/#executing-queries-with-getdatafromtree)
50+
with [Apollo](https://www.apollographql.com/docs/).
4351

4452
The workflow is as follows:
4553

0 commit comments

Comments
 (0)