From a615ef9b994bb93810f4307eba7d43bc632e7192 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Sun, 28 Jul 2024 12:40:27 +1000 Subject: [PATCH 1/2] refactor: simplify createBaseQuery --- .../src/createBaseQuery.svelte.ts | 69 ++++++------------- 1 file changed, 22 insertions(+), 47 deletions(-) diff --git a/packages/svelte-query/src/createBaseQuery.svelte.ts b/packages/svelte-query/src/createBaseQuery.svelte.ts index ec9739af52..5d1bffeb57 100644 --- a/packages/svelte-query/src/createBaseQuery.svelte.ts +++ b/packages/svelte-query/src/createBaseQuery.svelte.ts @@ -1,5 +1,4 @@ import { notifyManager } from '@tanstack/query-core' -import { untrack } from 'svelte' import { useIsRestoring } from './useIsRestoring' import { useQueryClient } from './useQueryClient' import type { @@ -32,23 +31,19 @@ export function createBaseQuery< const isRestoring = useIsRestoring() /** Creates a store that has the default options applied */ - function updateOptions() { + const defaultedOptions = $derived(() => { const queryKey: TQueryKey = $state.snapshot(options().queryKey) as any // remove proxy prevent reactive query in DevTools - const defaultedOptions = client.defaultQueryOptions({ + const defaultOptions = client.defaultQueryOptions({ ...options(), queryKey: queryKey, }) - defaultedOptions._optimisticResults = 'optimistic' - if (isRestoring()) { - defaultedOptions._optimisticResults = 'isRestoring' - } - - defaultedOptions.structuralSharing = false - - return defaultedOptions - } + defaultOptions._optimisticResults = isRestoring() + ? 'isRestoring' + : 'optimistic' + defaultOptions.structuralSharing = false + return defaultOptions + }) - const defaultedOptionsStore = updateOptions /** Creates the observer */ const observer = new Observer< TQueryFnData, @@ -56,57 +51,37 @@ export function createBaseQuery< TData, TQueryData, TQueryKey - >(client, defaultedOptionsStore()) + >(client, defaultedOptions()) const result = $state>( - observer.getOptimisticResult(defaultedOptionsStore()), + observer.getOptimisticResult(defaultedOptions()), ) - function upResult(r: QueryObserverResult) { + function updateResult(r: QueryObserverResult) { Object.assign(result, r) } $effect(() => { - let un = () => undefined - if (!isRestoring()) { - { - // @ts-expect-error - un = observer.subscribe((v) => { + const unsubscribe = isRestoring() + ? () => undefined + : observer.subscribe(() => { notifyManager.batchCalls(() => { - const temp = observer.getOptimisticResult(defaultedOptionsStore()) - upResult(temp) + updateResult(observer.getOptimisticResult(defaultedOptions())) })() }) - } - } observer.updateResult() - return () => { - un() - } + return () => unsubscribe() }) /** Subscribe to changes in result and defaultedOptionsStore */ $effect.pre(() => { - observer.setOptions(defaultedOptionsStore(), { listeners: false }) - upResult(observer.getOptimisticResult(defaultedOptionsStore())) - // result = observer.getOptimisticResult(defaultedOptionsStore()) //prevent lag , somehow observer.subscribe does not return + observer.setOptions(defaultedOptions(), { listeners: false }) + updateResult(observer.getOptimisticResult(defaultedOptions())) }) - const final_ = $state({ value: result }) - - // update result - $effect(() => { - // svelte does not need this with it is proxy state and fine-grained reactivity? - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - if (result !== null) - untrack(() => { - const v = !defaultedOptionsStore().notifyOnChangeProps - ? observer.trackResult(result) - : result - - final_.value = Object.assign(final_.value, v) - }) - }) - return final_.value + // Handle result property usage tracking + return !defaultedOptions().notifyOnChangeProps + ? observer.trackResult(result) + : result } From d81bc85729b0aebee7bbfc949711c172a6fca081 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Sun, 28 Jul 2024 13:03:24 +1000 Subject: [PATCH 2/2] Don't take snapshot of queryKey --- packages/svelte-query/src/createBaseQuery.svelte.ts | 6 +----- packages/svelte-query/tests/createQuery/BaseExample.svelte | 6 ++---- .../svelte-query/tests/createQuery/DisabledExample.svelte | 6 ++---- 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/packages/svelte-query/src/createBaseQuery.svelte.ts b/packages/svelte-query/src/createBaseQuery.svelte.ts index 5d1bffeb57..fbae3fbdd5 100644 --- a/packages/svelte-query/src/createBaseQuery.svelte.ts +++ b/packages/svelte-query/src/createBaseQuery.svelte.ts @@ -32,11 +32,7 @@ export function createBaseQuery< /** Creates a store that has the default options applied */ const defaultedOptions = $derived(() => { - const queryKey: TQueryKey = $state.snapshot(options().queryKey) as any // remove proxy prevent reactive query in DevTools - const defaultOptions = client.defaultQueryOptions({ - ...options(), - queryKey: queryKey, - }) + const defaultOptions = client.defaultQueryOptions(options()) defaultOptions._optimisticResults = isRestoring() ? 'isRestoring' : 'optimistic' diff --git a/packages/svelte-query/tests/createQuery/BaseExample.svelte b/packages/svelte-query/tests/createQuery/BaseExample.svelte index e4acf73f0c..bbad10a4c6 100644 --- a/packages/svelte-query/tests/createQuery/BaseExample.svelte +++ b/packages/svelte-query/tests/createQuery/BaseExample.svelte @@ -17,10 +17,8 @@ const query = createQuery(options, queryClient) $effect(() => { - states.value = [ - ...untrack(() => states.value), - $state.snapshot(query) as QueryObserverResult, - ] + // @ts-expect-error + states.value = [...untrack(() => states.value), $state.snapshot(query)] }) diff --git a/packages/svelte-query/tests/createQuery/DisabledExample.svelte b/packages/svelte-query/tests/createQuery/DisabledExample.svelte index ac4e2f88d5..14c945a4eb 100644 --- a/packages/svelte-query/tests/createQuery/DisabledExample.svelte +++ b/packages/svelte-query/tests/createQuery/DisabledExample.svelte @@ -27,10 +27,8 @@ ) $effect(() => { - states.value = [ - ...untrack(() => states.value), - $state.snapshot(query) as QueryObserverResult, - ] + // @ts-expect-error + states.value = [...untrack(() => states.value), $state.snapshot(query)] })