Skip to content

Commit 3ed5e48

Browse files
authored
feat(cacheTime): default cacheTime to Infinity for SSR (#3377)
* feat(cacheTime): default cacheTime to Infinity for SSR Cache persists for the lifecycle of request and can be immediately GCed afterward Helps close Node process immediately after use * docs: Add default server-side cacheTime to migration docs
1 parent 21dd633 commit 3ed5e48

File tree

5 files changed

+16
-6
lines changed

5 files changed

+16
-6
lines changed

docs/src/pages/guides/migrating-to-react-query-4.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,14 @@ This will mostly affect `disabled` queries that don't have any `data` yet, as th
315315

316316
Also, have a look at [the guide on dependent queries](../guides/dependent-queries)
317317

318+
### No _default_ manual Garbage Collection server-side
319+
320+
In v3, React Query would cache query results for a default of 5 minutes, then manually garbage collect that data. This default was applied to server-side React Query as well.
321+
322+
This lead to high memory consumption and hanging processes waiting for this manual garbage collection to complete. In v4, by default the server-side `cacheTime` is now set to `Infinity` effectively disabling manual garbage collection (the NodeJS process will clear everything once a request is complete).
323+
324+
This change only impacts users of server-side React Query, such as with Next.js. If you are setting a `cacheTime` manually this will not impact you (although you may want to mirror behavior).
325+
318326
## New Features 🚀
319327

320328
### Proper offline support

docs/src/pages/guides/ssr.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,9 @@ This refetching of stale queries is a perfect match when caching markup in a CDN
202202

203203
### High memory consumption on server
204204

205-
In case you are creating the `QueryClient` for every request, React Query creates the isolated cache for this client, which is preserved in memory for the `cacheTime` period (which defaults to 5 minutes). That may lead to high memory consumption on server in case of high number of requests during that period.
205+
In case you are creating the `QueryClient` for every request, React Query creates the isolated cache for this client, which is preserved in memory for the `cacheTime` period. That may lead to high memory consumption on server in case of high number of requests during that period.
206+
207+
On the server, `cacheTime` defaults to `Infinity` which disables manual garbage collection and will automatically clear memory once a request has finished. If you are explicitly setting a non-Infinity `cacheTime` then you will be responsible for clearing the cache early.
206208

207209
To clear the cache after it is not needed and to lower memory consumption, you can add a call to [`queryClient.clear()`](../reference/QueryClient#queryclientclear) after the request is handled and dehydrated state has been sent to the client.
208210

docs/src/pages/guides/testing.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const queryClient = new QueryClient({
8888

8989
## Set cacheTime to Infinity with Jest
9090

91-
`cacheTime` is set to 5 minutes by default. It means that the cache garbage collector timer will be triggered every 5 minutes. If you use Jest, you can set the `cacheTime` to `Infinity` to prevent "Jest did not exit one second after the test run completed" error message.
91+
If you use Jest, you can set the `cacheTime` to `Infinity` to prevent "Jest did not exit one second after the test run completed" error message. This is the default behavior on the server, and is only necessary to set if you are explicitly setting a `cacheTime`.
9292

9393
## Testing Network Calls
9494

docs/src/pages/reference/useQuery.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const result = useQuery({
101101
- The time in milliseconds after data is considered stale. This value only applies to the hook it is defined on.
102102
- If set to `Infinity`, the data will never be considered stale
103103
- `cacheTime: number | Infinity`
104-
- Defaults to `5 * 60 * 1000` (5 minutes)
104+
- Defaults to `5 * 60 * 1000` (5 minutes) or `Infinity` during SSR
105105
- The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different cache times are specified, the longest one will be used.
106106
- If set to `Infinity`, will disable garbage collection
107107
- `queryKeyHashFn: (queryKey: QueryKey) => string`

src/core/removable.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { isValidTimeout } from './utils'
1+
import { isServer, isValidTimeout } from './utils'
22

33
export abstract class Removable {
44
cacheTime!: number
@@ -19,10 +19,10 @@ export abstract class Removable {
1919
}
2020

2121
protected updateCacheTime(newCacheTime: number | undefined): void {
22-
// Default to 5 minutes if no cache time is set
22+
// Default to 5 minutes (Infinity for server-side) if no cache time is set
2323
this.cacheTime = Math.max(
2424
this.cacheTime || 0,
25-
newCacheTime ?? 5 * 60 * 1000
25+
newCacheTime ?? (isServer ? Infinity : 5 * 60 * 1000)
2626
)
2727
}
2828

0 commit comments

Comments
 (0)