diff --git a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts index 3644494b03..a47ae191ee 100644 --- a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts +++ b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts @@ -269,11 +269,11 @@ describe('VueQueryPlugin', () => { ], }) - expect(customClient.isRestoring.value).toBeTruthy() + expect(customClient.isRestoring?.value).toBeTruthy() await sleep(0) - expect(customClient.isRestoring.value).toBeFalsy() + expect(customClient.isRestoring?.value).toBeFalsy() }) test('should delay useQuery subscription and not call fetcher if data is not stale', async () => { @@ -311,14 +311,14 @@ describe('VueQueryPlugin', () => { customClient, ) - expect(customClient.isRestoring.value).toBeTruthy() + expect(customClient.isRestoring?.value).toBeTruthy() expect(query.isFetching.value).toBeFalsy() expect(query.data.value).toStrictEqual(undefined) expect(fnSpy).toHaveBeenCalledTimes(0) await sleep(0) - expect(customClient.isRestoring.value).toBeFalsy() + expect(customClient.isRestoring?.value).toBeFalsy() expect(query.data.value).toStrictEqual({ foo: 'bar' }) expect(fnSpy).toHaveBeenCalledTimes(0) }) @@ -373,7 +373,7 @@ describe('VueQueryPlugin', () => { customClient, ) - expect(customClient.isRestoring.value).toBeTruthy() + expect(customClient.isRestoring?.value).toBeTruthy() expect(query.isFetching.value).toBeFalsy() expect(query.data.value).toStrictEqual(undefined) @@ -384,7 +384,7 @@ describe('VueQueryPlugin', () => { await sleep(0) - expect(customClient.isRestoring.value).toBeFalsy() + expect(customClient.isRestoring?.value).toBeFalsy() expect(query.data.value).toStrictEqual({ foo1: 'bar1' }) expect(queries.value[0].data).toStrictEqual({ foo2: 'bar2' }) expect(fnSpy).toHaveBeenCalledTimes(0) diff --git a/packages/vue-query/src/queryClient.ts b/packages/vue-query/src/queryClient.ts index dc0bff131d..2dfc53e803 100644 --- a/packages/vue-query/src/queryClient.ts +++ b/packages/vue-query/src/queryClient.ts @@ -44,7 +44,7 @@ export class QueryClient extends QC { super(vueQueryConfig) } - isRestoring: Ref = ref(false) + isRestoring?: Ref = ref(false) isFetching(filters: MaybeRefDeep = {}): number { return super.isFetching(cloneDeepUnref(filters)) diff --git a/packages/vue-query/src/useBaseQuery.ts b/packages/vue-query/src/useBaseQuery.ts index 65a988ee03..1b6786837b 100644 --- a/packages/vue-query/src/useBaseQuery.ts +++ b/packages/vue-query/src/useBaseQuery.ts @@ -93,7 +93,7 @@ export function useBaseQuery< TQueryKey > = client.defaultQueryOptions(clonedOptions) - defaulted._optimisticResults = client.isRestoring.value + defaulted._optimisticResults = client.isRestoring?.value ? 'isRestoring' : 'optimistic' @@ -110,18 +110,20 @@ export function useBaseQuery< // noop } - watch( - client.isRestoring, - (isRestoring) => { - if (!isRestoring) { - unsubscribe() - unsubscribe = observer.subscribe((result) => { - updateState(state, result) - }) - } - }, - { immediate: true }, - ) + if (client.isRestoring) { + watch( + client.isRestoring, + (isRestoring) => { + if (!isRestoring) { + unsubscribe() + unsubscribe = observer.subscribe((result) => { + updateState(state, result) + }) + } + }, + { immediate: true }, + ) + } const updater = () => { observer.setOptions(defaultedOptions.value) diff --git a/packages/vue-query/src/useQueries.ts b/packages/vue-query/src/useQueries.ts index 04edb91e4a..48af3dfa98 100644 --- a/packages/vue-query/src/useQueries.ts +++ b/packages/vue-query/src/useQueries.ts @@ -274,7 +274,7 @@ export function useQueries< } const defaulted = client.defaultQueryOptions(clonedOptions) - defaulted._optimisticResults = client.isRestoring.value + defaulted._optimisticResults = client.isRestoring?.value ? 'isRestoring' : 'optimistic' @@ -317,20 +317,22 @@ export function useQueries< // noop } - watch( - client.isRestoring, - (isRestoring) => { - if (!isRestoring) { - unsubscribe() - unsubscribe = observer.subscribe(() => { - state.value = getOptimisticResult() - }) + if (client.isRestoring) { + watch( + client.isRestoring, + (isRestoring) => { + if (!isRestoring) { + unsubscribe() + unsubscribe = observer.subscribe(() => { + state.value = getOptimisticResult() + }) - state.value = getOptimisticResult() - } - }, - { immediate: true }, - ) + state.value = getOptimisticResult() + } + }, + { immediate: true }, + ) + } watch(defaultedQueries, (queriesValue) => { observer.setQueries( diff --git a/packages/vue-query/src/vueQueryPlugin.ts b/packages/vue-query/src/vueQueryPlugin.ts index 04d254ffdb..590d994d30 100644 --- a/packages/vue-query/src/vueQueryPlugin.ts +++ b/packages/vue-query/src/vueQueryPlugin.ts @@ -47,11 +47,15 @@ export const VueQueryPlugin = { } if (options.clientPersister) { - client.isRestoring.value = true + if (client.isRestoring) { + client.isRestoring.value = true + } const [unmount, promise] = options.clientPersister(client) persisterUnmount = unmount promise.then(() => { - client.isRestoring.value = false + if (client.isRestoring) { + client.isRestoring.value = false + } options.clientPersisterOnSuccess?.(client) }) }