From 7c06c03a6b8dbe6ea07d2f2a0a4be5309d191ff7 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Tue, 14 Mar 2023 09:04:59 +0100 Subject: [PATCH 1/9] refactor: unify hydration options --- packages/query-core/src/hydration.ts | 62 ++++++++----------- packages/query-core/src/index.ts | 9 +-- .../query-core/src/tests/hydration.test.tsx | 8 +-- 3 files changed, 31 insertions(+), 48 deletions(-) diff --git a/packages/query-core/src/hydration.ts b/packages/query-core/src/hydration.ts index 6191f7f1e8..24f3610a8e 100644 --- a/packages/query-core/src/hydration.ts +++ b/packages/query-core/src/hydration.ts @@ -7,14 +7,13 @@ import type { QueryOptions, } from './types' import type { Mutation, MutationState } from './mutation' +import { functionalUpdate } from './utils' // TYPES export interface DehydrateOptions { - dehydrateMutations?: boolean - dehydrateQueries?: boolean - shouldDehydrateMutation?: ShouldDehydrateMutationFunction - shouldDehydrateQuery?: ShouldDehydrateQueryFunction + dehydrateMutation?: boolean | ((mutation: Mutation) => boolean) + dehydrateQuery?: boolean | ((query: Query) => boolean) } export interface HydrateOptions { @@ -40,10 +39,6 @@ export interface DehydratedState { queries: DehydratedQuery[] } -export type ShouldDehydrateQueryFunction = (query: Query) => boolean - -export type ShouldDehydrateMutationFunction = (mutation: Mutation) => boolean - // FUNCTIONS function dehydrateMutation(mutation: Mutation): DehydratedMutation { @@ -65,11 +60,11 @@ function dehydrateQuery(query: Query): DehydratedQuery { } } -export function defaultShouldDehydrateMutation(mutation: Mutation) { +export function defaultDehydrateMutation(mutation: Mutation) { return mutation.state.isPaused } -export function defaultShouldDehydrateQuery(query: Query) { +export function defaultDehydrateQuery(query: Query) { return query.state.status === 'success' } @@ -80,33 +75,28 @@ export function dehydrate( const mutations: DehydratedMutation[] = [] const queries: DehydratedQuery[] = [] - if (options.dehydrateMutations !== false) { - const shouldDehydrateMutation = - options.shouldDehydrateMutation || defaultShouldDehydrateMutation - - client - .getMutationCache() - .getAll() - .forEach((mutation) => { - if (shouldDehydrateMutation(mutation)) { - mutations.push(dehydrateMutation(mutation)) - } - }) - } + const dehydrateMutations = + options.dehydrateMutation ?? defaultDehydrateMutation - if (options.dehydrateQueries !== false) { - const shouldDehydrateQuery = - options.shouldDehydrateQuery || defaultShouldDehydrateQuery - - client - .getQueryCache() - .getAll() - .forEach((query) => { - if (shouldDehydrateQuery(query)) { - queries.push(dehydrateQuery(query)) - } - }) - } + client + .getMutationCache() + .getAll() + .forEach((mutation) => { + if (functionalUpdate(dehydrateMutations, mutation)) { + mutations.push(dehydrateMutation(mutation)) + } + }) + + const dehydrateQueries = options.dehydrateQuery ?? defaultDehydrateQuery + + client + .getQueryCache() + .getAll() + .forEach((query) => { + if (functionalUpdate(dehydrateQueries, query)) { + queries.push(dehydrateQuery(query)) + } + }) return { mutations, queries } } diff --git a/packages/query-core/src/index.ts b/packages/query-core/src/index.ts index 93b6fdc577..28b05851ca 100644 --- a/packages/query-core/src/index.ts +++ b/packages/query-core/src/index.ts @@ -20,12 +20,7 @@ export { } from './utils' export type { MutationFilters, QueryFilters, Updater } from './utils' export { isCancelledError } from './retryer' -export { - dehydrate, - hydrate, - defaultShouldDehydrateMutation, - defaultShouldDehydrateQuery, -} from './hydration' +export { dehydrate, hydrate } from './hydration' // Types export * from './types' @@ -35,6 +30,4 @@ export type { DehydrateOptions, DehydratedState, HydrateOptions, - ShouldDehydrateMutationFunction, - ShouldDehydrateQueryFunction, } from './hydration' diff --git a/packages/query-core/src/tests/hydration.test.tsx b/packages/query-core/src/tests/hydration.test.tsx index 9093c39671..0190aa9101 100644 --- a/packages/query-core/src/tests/hydration.test.tsx +++ b/packages/query-core/src/tests/hydration.test.tsx @@ -113,7 +113,7 @@ describe('dehydration and rehydration', () => { queryFn: () => fetchData('string'), }) - const dehydrated = dehydrate(queryClient, { dehydrateQueries: false }) + const dehydrated = dehydrate(queryClient, { dehydrateQuery: false }) expect(dehydrated.queries.length).toBe(0) @@ -244,7 +244,7 @@ describe('dehydration and rehydration', () => { consoleMock.mockRestore() }) - test('should filter queries via shouldDehydrateQuery', async () => { + test('should filter queries via dehydrateQuery', async () => { const queryCache = new QueryCache() const queryClient = createQueryClient({ queryCache }) await queryClient.prefetchQuery({ @@ -256,7 +256,7 @@ describe('dehydration and rehydration', () => { queryFn: () => fetchData(1), }) const dehydrated = dehydrate(queryClient, { - shouldDehydrateQuery: (query) => query.queryKey[0] !== 'string', + dehydrateQuery: (query) => query.queryKey[0] !== 'string', }) // This is testing implementation details that can change and are not @@ -446,7 +446,7 @@ describe('dehydration and rehydration', () => { ).catch(() => undefined) await sleep(1) - const dehydrated = dehydrate(queryClient, { dehydrateMutations: false }) + const dehydrated = dehydrate(queryClient, { dehydrateMutation: false }) expect(dehydrated.mutations.length).toBe(0) From eb214c8f8913726c575f24c0c3f826ccca82bd33 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Tue, 14 Mar 2023 17:07:47 +0100 Subject: [PATCH 2/9] docs: update hydration docs --- docs/react/reference/hydration.md | 35 +++++++++---------- packages/query-core/src/hydration.ts | 32 +++++++---------- packages/query-core/src/index.ts | 7 +++- .../query-core/src/tests/hydration.test.tsx | 6 ++-- .../src/__tests__/persist.test.ts | 2 +- 5 files changed, 39 insertions(+), 43 deletions(-) diff --git a/docs/react/reference/hydration.md b/docs/react/reference/hydration.md index ee657a37cb..3050938c56 100644 --- a/docs/react/reference/hydration.md +++ b/docs/react/reference/hydration.md @@ -11,7 +11,8 @@ title: hydration import { dehydrate } from '@tanstack/react-query' const dehydratedState = dehydrate(queryClient, { - shouldDehydrateQuery, + dehydrateQuery, + dehydrateMutation, }) ``` @@ -22,24 +23,20 @@ const dehydratedState = dehydrate(queryClient, { - The `queryClient` that should be dehydrated - `options: DehydrateOptions` - Optional - - `dehydrateMutations: boolean` + - `dehydrateMutation: (mutation: Mutation) => boolean` - Optional - - Whether or not to dehydrate mutations. - - `dehydrateQueries: boolean` + - Whether to dehydrate mutations. + - The function is called for each mutation in the cache + - Return `true` to include this mutation in dehydration, or `false` otherwise + - Defaults to only including paused mutations + - If you would like to extend the function while retaining the default behavior, import and execute `defaultDehydrateMutation` as part of the return statement + - `dehydrateQuery: boolean | (query: Query) => boolean` - Optional - - Whether or not to dehydrate queries. - - `shouldDehydrateMutation: (mutation: Mutation) => boolean` - - Optional - - This function is called for each mutation in the cache - - Return `true` to include this mutation in dehydration, or `false` otherwise - - The default version only includes paused mutations - - If you would like to extend the function while retaining the previous behavior, import and execute `defaultShouldDehydrateMutation` as part of the return statement - - `shouldDehydrateQuery: (query: Query) => boolean` - - Optional - - This function is called for each query in the cache - - Return `true` to include this query in dehydration, or `false` otherwise - - The default version only includes successful queries, do `shouldDehydrateQuery: () => true` to include all queries - - If you would like to extend the function while retaining the previous behavior, import and execute `defaultShouldDehydrateQuery` as part of the return statement + - Whether to dehydrate queries. + - The function, it is called for each query in the cache + - Return `true` to include this query in dehydration, or `false` otherwise + - Defaults to only including successful queries + - If you would like to extend the function while retaining the default behavior, import and execute `defaultDehydrateQuery` as part of the return statement **Returns** @@ -50,11 +47,11 @@ const dehydratedState = dehydrate(queryClient, { ### limitations -Some storage systems (such as browser [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)) require values to be JSON serializable. If you need to dehydrate values that are not automatically serializable to JSON (like `Error` or `undefined`), you have to serialize them for yourself. Since only successful queries are included per default, to also include `Errors`, you have to provide `shouldDehydrateQuery`, e.g.: +Some storage systems (such as browser [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)) require values to be JSON serializable. If you need to dehydrate values that are not automatically serializable to JSON (like `Error` or `undefined`), you have to serialize them for yourself. Since only successful queries are included per default, to also include `Errors`, you have to provide `dehydrateQuery`, e.g.: ```tsx // server -const state = dehydrate(client, { shouldDehydrateQuery: () => true }) // to also include Errors +const state = dehydrate(client, { dehydrateQuery: () => true }) // to also include Errors const serializedState = mySerialize(state) // transform Error instances to objects // client diff --git a/packages/query-core/src/hydration.ts b/packages/query-core/src/hydration.ts index 24f3610a8e..72a2fcba74 100644 --- a/packages/query-core/src/hydration.ts +++ b/packages/query-core/src/hydration.ts @@ -7,13 +7,12 @@ import type { QueryOptions, } from './types' import type { Mutation, MutationState } from './mutation' -import { functionalUpdate } from './utils' // TYPES export interface DehydrateOptions { - dehydrateMutation?: boolean | ((mutation: Mutation) => boolean) - dehydrateQuery?: boolean | ((query: Query) => boolean) + dehydrateMutation?: (mutation: Mutation) => boolean + dehydrateQuery?: (query: Query) => boolean } export interface HydrateOptions { @@ -72,31 +71,24 @@ export function dehydrate( client: QueryClient, options: DehydrateOptions = {}, ): DehydratedState { - const mutations: DehydratedMutation[] = [] - const queries: DehydratedQuery[] = [] - - const dehydrateMutations = + const shouldDehydrateMutation = options.dehydrateMutation ?? defaultDehydrateMutation - client + const mutations = client .getMutationCache() .getAll() - .forEach((mutation) => { - if (functionalUpdate(dehydrateMutations, mutation)) { - mutations.push(dehydrateMutation(mutation)) - } - }) + .flatMap((mutation) => + shouldDehydrateMutation(mutation) ? [dehydrateMutation(mutation)] : [], + ) - const dehydrateQueries = options.dehydrateQuery ?? defaultDehydrateQuery + const shouldDehydrateQuery = options.dehydrateQuery ?? defaultDehydrateQuery - client + const queries = client .getQueryCache() .getAll() - .forEach((query) => { - if (functionalUpdate(dehydrateQueries, query)) { - queries.push(dehydrateQuery(query)) - } - }) + .flatMap((query) => + shouldDehydrateQuery(query) ? [dehydrateQuery(query)] : [], + ) return { mutations, queries } } diff --git a/packages/query-core/src/index.ts b/packages/query-core/src/index.ts index 28b05851ca..17cca4dcd2 100644 --- a/packages/query-core/src/index.ts +++ b/packages/query-core/src/index.ts @@ -20,7 +20,12 @@ export { } from './utils' export type { MutationFilters, QueryFilters, Updater } from './utils' export { isCancelledError } from './retryer' -export { dehydrate, hydrate } from './hydration' +export { + dehydrate, + hydrate, + defaultDehydrateQuery, + defaultDehydrateMutation, +} from './hydration' // Types export * from './types' diff --git a/packages/query-core/src/tests/hydration.test.tsx b/packages/query-core/src/tests/hydration.test.tsx index 0190aa9101..0dd69ee81b 100644 --- a/packages/query-core/src/tests/hydration.test.tsx +++ b/packages/query-core/src/tests/hydration.test.tsx @@ -113,7 +113,7 @@ describe('dehydration and rehydration', () => { queryFn: () => fetchData('string'), }) - const dehydrated = dehydrate(queryClient, { dehydrateQuery: false }) + const dehydrated = dehydrate(queryClient, { dehydrateQuery: () => false }) expect(dehydrated.queries.length).toBe(0) @@ -446,7 +446,9 @@ describe('dehydration and rehydration', () => { ).catch(() => undefined) await sleep(1) - const dehydrated = dehydrate(queryClient, { dehydrateMutation: false }) + const dehydrated = dehydrate(queryClient, { + dehydrateMutation: () => false, + }) expect(dehydrated.mutations.length).toBe(0) diff --git a/packages/query-persist-client-core/src/__tests__/persist.test.ts b/packages/query-persist-client-core/src/__tests__/persist.test.ts index 828a3bfbde..8dd204e5d3 100644 --- a/packages/query-persist-client-core/src/__tests__/persist.test.ts +++ b/packages/query-persist-client-core/src/__tests__/persist.test.ts @@ -16,7 +16,7 @@ describe('persistQueryClientSubscribe', () => { const unsubscribe = persistQueryClientSubscribe({ queryClient, persister, - dehydrateOptions: { shouldDehydrateMutation: () => true }, + dehydrateOptions: { dehydrateMutation: () => true }, }) queryClient.getMutationCache().build(queryClient, { From 156924abdeb94ddd433b9dacc9bd291d576a7033 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Tue, 14 Mar 2023 17:35:17 +0100 Subject: [PATCH 3/9] migration guide --- docs/react/guides/migrating-to-v5.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/react/guides/migrating-to-v5.md b/docs/react/guides/migrating-to-v5.md index 236dab2c8a..de43391265 100644 --- a/docs/react/guides/migrating-to-v5.md +++ b/docs/react/guides/migrating-to-v5.md @@ -300,6 +300,26 @@ However, refetching all pages might lead to UI inconsistencies. Also, this optio The v5 includes a new `maxPages` option for infinite queries to limit the number of pages to store in the query data and to refetch. This new feature handles the use cases initially identified for the `refetchPage` page feature without the related issues. +### new hydration API + +The options you can pass to dehydrate have been simplified: + +```diff +- dehydrateMutations?: boolean +- dehydrateQueries?: boolean +- shouldDehydrateMutation?: ShouldDehydrateMutationFunction +- shouldDehydrateQuery?: ShouldDehydrateQueryFunction ++ dehydrateMutation?: (mutation: Mutation) => boolean ++ dehydrateQuery?: (query: Query) => boolean +``` + +Also, the export default functions have been renamed: + +```diff +- import { shouldDehydrateMutation, shouldDehydrateQuery } from '@tanstack/query-core' ++ import { dehydrateMutation, dehydrateQuery } from '@tanstack/query-core' +``` + ### Infinite queries now need a `defaultPageParam` Previously, we've passed `undefined` to the `queryFn` as `pageParam`, and you could assign a default value to the `pageParam` parameter in the `queryFn` function signature. This had the drawback of storing `undefined` in the `queryCache`, which is not serializable. @@ -410,7 +430,7 @@ We have a new, simplified way to perform optimistic updates by leveraging the re Here, we are only changing how the UI looks when the mutation is running instead of writing data directly to the cache. This works best if we only have one place where we need to show the optimistic update. For more details, have a look at the [optimistic updates documentation](../guides/optimistic-updates.md). -### Eternal list: scalable infinite query with new maxPages option +### Limited, Infinite Queries with new maxPages option Infinite queries are great when infinite scroll or pagination are needed. However, the more pages you fetch, the more memory you consume, and this also slows down the query refetching process as all the pages are sequentially refetched. From a33dbae650546a1728dd0ae023677698a6d8c44c Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Mon, 20 Mar 2023 11:38:37 +0100 Subject: [PATCH 4/9] refactor: use shouldDehydrate... syntax --- docs/react/guides/migrating-to-v5.md | 13 +------------ docs/react/reference/hydration.md | 12 ++++++------ packages/query-core/src/hydration.ts | 21 ++++++++++----------- packages/query-core/src/index.ts | 4 ++-- 4 files changed, 19 insertions(+), 31 deletions(-) diff --git a/docs/react/guides/migrating-to-v5.md b/docs/react/guides/migrating-to-v5.md index de43391265..fda2a2980a 100644 --- a/docs/react/guides/migrating-to-v5.md +++ b/docs/react/guides/migrating-to-v5.md @@ -302,22 +302,11 @@ The v5 includes a new `maxPages` option for infinite queries to limit the number ### new hydration API -The options you can pass to dehydrate have been simplified: +The options you can pass to dehydrate have been simplified. Queries and Mutations are always dehydrated (according to the default function implementation). To change this behaviour, you can implement `shouldDehydrateQuery` or `shouldDehydrateMutation`. ```diff - dehydrateMutations?: boolean - dehydrateQueries?: boolean -- shouldDehydrateMutation?: ShouldDehydrateMutationFunction -- shouldDehydrateQuery?: ShouldDehydrateQueryFunction -+ dehydrateMutation?: (mutation: Mutation) => boolean -+ dehydrateQuery?: (query: Query) => boolean -``` - -Also, the export default functions have been renamed: - -```diff -- import { shouldDehydrateMutation, shouldDehydrateQuery } from '@tanstack/query-core' -+ import { dehydrateMutation, dehydrateQuery } from '@tanstack/query-core' ``` ### Infinite queries now need a `defaultPageParam` diff --git a/docs/react/reference/hydration.md b/docs/react/reference/hydration.md index 3050938c56..67dc9a8bbb 100644 --- a/docs/react/reference/hydration.md +++ b/docs/react/reference/hydration.md @@ -11,8 +11,8 @@ title: hydration import { dehydrate } from '@tanstack/react-query' const dehydratedState = dehydrate(queryClient, { - dehydrateQuery, - dehydrateMutation, + shouldDehydrateQuery, + shouldDehydrateMutation, }) ``` @@ -23,20 +23,20 @@ const dehydratedState = dehydrate(queryClient, { - The `queryClient` that should be dehydrated - `options: DehydrateOptions` - Optional - - `dehydrateMutation: (mutation: Mutation) => boolean` + - `shouldDehydrateMutation: (mutation: Mutation) => boolean` - Optional - Whether to dehydrate mutations. - The function is called for each mutation in the cache - Return `true` to include this mutation in dehydration, or `false` otherwise - Defaults to only including paused mutations - - If you would like to extend the function while retaining the default behavior, import and execute `defaultDehydrateMutation` as part of the return statement - - `dehydrateQuery: boolean | (query: Query) => boolean` + - If you would like to extend the function while retaining the default behavior, import and execute `defaultShouldDehydrateMutation` as part of the return statement + - `shouldDehydrateQuery: boolean | (query: Query) => boolean` - Optional - Whether to dehydrate queries. - The function, it is called for each query in the cache - Return `true` to include this query in dehydration, or `false` otherwise - Defaults to only including successful queries - - If you would like to extend the function while retaining the default behavior, import and execute `defaultDehydrateQuery` as part of the return statement + - If you would like to extend the function while retaining the default behavior, import and execute `defaultShouldDehydrateQuery` as part of the return statement **Returns** diff --git a/packages/query-core/src/hydration.ts b/packages/query-core/src/hydration.ts index 72a2fcba74..dbbd0270f6 100644 --- a/packages/query-core/src/hydration.ts +++ b/packages/query-core/src/hydration.ts @@ -11,8 +11,8 @@ import type { Mutation, MutationState } from './mutation' // TYPES export interface DehydrateOptions { - dehydrateMutation?: (mutation: Mutation) => boolean - dehydrateQuery?: (query: Query) => boolean + shouldDehydrateMutation?: (mutation: Mutation) => boolean + shouldDehydrateQuery?: (query: Query) => boolean } export interface HydrateOptions { @@ -59,11 +59,11 @@ function dehydrateQuery(query: Query): DehydratedQuery { } } -export function defaultDehydrateMutation(mutation: Mutation) { +export function defaultShouldDehydrateMutation(mutation: Mutation) { return mutation.state.isPaused } -export function defaultDehydrateQuery(query: Query) { +export function defaultShouldDehydrateQuery(query: Query) { return query.state.status === 'success' } @@ -71,24 +71,23 @@ export function dehydrate( client: QueryClient, options: DehydrateOptions = {}, ): DehydratedState { - const shouldDehydrateMutation = - options.dehydrateMutation ?? defaultDehydrateMutation + const filterMutation = + options.shouldDehydrateMutation ?? defaultShouldDehydrateMutation const mutations = client .getMutationCache() .getAll() .flatMap((mutation) => - shouldDehydrateMutation(mutation) ? [dehydrateMutation(mutation)] : [], + filterMutation(mutation) ? [dehydrateMutation(mutation)] : [], ) - const shouldDehydrateQuery = options.dehydrateQuery ?? defaultDehydrateQuery + const filterQuery = + options.shouldDehydrateQuery ?? defaultShouldDehydrateQuery const queries = client .getQueryCache() .getAll() - .flatMap((query) => - shouldDehydrateQuery(query) ? [dehydrateQuery(query)] : [], - ) + .flatMap((query) => (filterQuery(query) ? [dehydrateQuery(query)] : [])) return { mutations, queries } } diff --git a/packages/query-core/src/index.ts b/packages/query-core/src/index.ts index e4370ad544..23a9b44681 100644 --- a/packages/query-core/src/index.ts +++ b/packages/query-core/src/index.ts @@ -23,8 +23,8 @@ export { isCancelledError } from './retryer' export { dehydrate, hydrate, - defaultDehydrateQuery, - defaultDehydrateMutation, + defaultShouldDehydrateQuery, + defaultShouldDehydrateMutation, } from './hydration' // Types From ab54eb554f887cffd14e2324a97c2c3824874337 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Mon, 20 Mar 2023 11:39:15 +0100 Subject: [PATCH 5/9] Update docs/react/guides/migrating-to-v5.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fredrik Höglund --- docs/react/guides/migrating-to-v5.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react/guides/migrating-to-v5.md b/docs/react/guides/migrating-to-v5.md index fda2a2980a..453e51aa30 100644 --- a/docs/react/guides/migrating-to-v5.md +++ b/docs/react/guides/migrating-to-v5.md @@ -300,7 +300,7 @@ However, refetching all pages might lead to UI inconsistencies. Also, this optio The v5 includes a new `maxPages` option for infinite queries to limit the number of pages to store in the query data and to refetch. This new feature handles the use cases initially identified for the `refetchPage` page feature without the related issues. -### new hydration API +### New hydration API The options you can pass to dehydrate have been simplified. Queries and Mutations are always dehydrated (according to the default function implementation). To change this behaviour, you can implement `shouldDehydrateQuery` or `shouldDehydrateMutation`. From a799b5faac5dca8f8b280b7deef18f8593ef1b35 Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Mon, 20 Mar 2023 11:40:23 +0100 Subject: [PATCH 6/9] Apply suggestions from code review --- docs/react/reference/hydration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/reference/hydration.md b/docs/react/reference/hydration.md index 67dc9a8bbb..080f4c2d2a 100644 --- a/docs/react/reference/hydration.md +++ b/docs/react/reference/hydration.md @@ -47,11 +47,11 @@ const dehydratedState = dehydrate(queryClient, { ### limitations -Some storage systems (such as browser [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)) require values to be JSON serializable. If you need to dehydrate values that are not automatically serializable to JSON (like `Error` or `undefined`), you have to serialize them for yourself. Since only successful queries are included per default, to also include `Errors`, you have to provide `dehydrateQuery`, e.g.: +Some storage systems (such as browser [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)) require values to be JSON serializable. If you need to dehydrate values that are not automatically serializable to JSON (like `Error` or `undefined`), you have to serialize them for yourself. Since only successful queries are included per default, to also include `Errors`, you have to provide `shouldDehydrateQuery `, e.g.: ```tsx // server -const state = dehydrate(client, { dehydrateQuery: () => true }) // to also include Errors +const state = dehydrate(client, { shouldDehydrateQuery: () => true }) // to also include Errors const serializedState = mySerialize(state) // transform Error instances to objects // client From ac9702abaa54eb3024822b882823fad22afa2bcd Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Mon, 20 Mar 2023 11:41:07 +0100 Subject: [PATCH 7/9] chore: fix tests --- packages/query-core/src/tests/hydration.test.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/query-core/src/tests/hydration.test.tsx b/packages/query-core/src/tests/hydration.test.tsx index 0dd69ee81b..a1c759858a 100644 --- a/packages/query-core/src/tests/hydration.test.tsx +++ b/packages/query-core/src/tests/hydration.test.tsx @@ -113,7 +113,9 @@ describe('dehydration and rehydration', () => { queryFn: () => fetchData('string'), }) - const dehydrated = dehydrate(queryClient, { dehydrateQuery: () => false }) + const dehydrated = dehydrate(queryClient, { + shouldDehydrateQuery: () => false, + }) expect(dehydrated.queries.length).toBe(0) @@ -256,7 +258,7 @@ describe('dehydration and rehydration', () => { queryFn: () => fetchData(1), }) const dehydrated = dehydrate(queryClient, { - dehydrateQuery: (query) => query.queryKey[0] !== 'string', + shouldDehydrateQuery: (query) => query.queryKey[0] !== 'string', }) // This is testing implementation details that can change and are not @@ -447,7 +449,7 @@ describe('dehydration and rehydration', () => { await sleep(1) const dehydrated = dehydrate(queryClient, { - dehydrateMutation: () => false, + shouldDehydrateMutation: () => false, }) expect(dehydrated.mutations.length).toBe(0) From b24983597ffb4a06e4b6818b59a2837223bfa0ad Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Mon, 20 Mar 2023 13:00:15 +0100 Subject: [PATCH 8/9] chore: fix tests --- .../query-persist-client-core/src/__tests__/persist.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/query-persist-client-core/src/__tests__/persist.test.ts b/packages/query-persist-client-core/src/__tests__/persist.test.ts index 8dd204e5d3..828a3bfbde 100644 --- a/packages/query-persist-client-core/src/__tests__/persist.test.ts +++ b/packages/query-persist-client-core/src/__tests__/persist.test.ts @@ -16,7 +16,7 @@ describe('persistQueryClientSubscribe', () => { const unsubscribe = persistQueryClientSubscribe({ queryClient, persister, - dehydrateOptions: { dehydrateMutation: () => true }, + dehydrateOptions: { shouldDehydrateMutation: () => true }, }) queryClient.getMutationCache().build(queryClient, { From d3975e55fdfedaf73ce584a1d8e5b894091bb75a Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Sat, 1 Apr 2023 09:17:29 +0200 Subject: [PATCH 9/9] Update docs/react/reference/hydration.md --- docs/react/reference/hydration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react/reference/hydration.md b/docs/react/reference/hydration.md index 080f4c2d2a..48b839f325 100644 --- a/docs/react/reference/hydration.md +++ b/docs/react/reference/hydration.md @@ -47,7 +47,7 @@ const dehydratedState = dehydrate(queryClient, { ### limitations -Some storage systems (such as browser [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)) require values to be JSON serializable. If you need to dehydrate values that are not automatically serializable to JSON (like `Error` or `undefined`), you have to serialize them for yourself. Since only successful queries are included per default, to also include `Errors`, you have to provide `shouldDehydrateQuery `, e.g.: +Some storage systems (such as browser [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)) require values to be JSON serializable. If you need to dehydrate values that are not automatically serializable to JSON (like `Error` or `undefined`), you have to serialize them for yourself. Since only successful queries are included per default, to also include `Errors`, you have to provide `shouldDehydrateQuery`, e.g.: ```tsx // server