refactor(svelte-5-adapter): simplify createBaseQuery (#7808)

* refactor: simplify createBaseQuery * Don't take snapshot of queryKey
TanStack · Jul 31, 2024 · 54135bf · 54135bf
1 parent 233666d
commit 54135bf
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 59 deletions.
diff --git 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,81 +31,53 @@ export function createBaseQuery<
   const isRestoring = useIsRestoring()
 
   /** Creates a store that has the default options applied */
-  function updateOptions() {
-    const queryKey: TQueryKey = $state.snapshot(options().queryKey) as any // remove proxy prevent reactive query in DevTools
-    const defaultedOptions = client.defaultQueryOptions({
-      ...options(),
-      queryKey: queryKey,
-    })
-    defaultedOptions._optimisticResults = 'optimistic'
-    if (isRestoring()) {
-      defaultedOptions._optimisticResults = 'isRestoring'
-    }
-
-    defaultedOptions.structuralSharing = false
-
-    return defaultedOptions
-  }
+  const defaultedOptions = $derived(() => {
+    const defaultOptions = client.defaultQueryOptions(options())
+    defaultOptions._optimisticResults = isRestoring()
+      ? 'isRestoring'
+      : 'optimistic'
+    defaultOptions.structuralSharing = false
+    return defaultOptions
+  })
 
-  const defaultedOptionsStore = updateOptions
   /** Creates the observer */
   const observer = new Observer<
     TQueryFnData,
     TError,
     TData,
     TQueryData,
     TQueryKey
-  >(client, defaultedOptionsStore())
+  >(client, defaultedOptions())
 
   const result = $state<QueryObserverResult<TData, TError>>(
-    observer.getOptimisticResult(defaultedOptionsStore()),
+    observer.getOptimisticResult(defaultedOptions()),
   )
 
-  function upResult(r: QueryObserverResult<TData, TError>) {
+  function updateResult(r: QueryObserverResult<TData, TError>) {
     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
 }
diff --git 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)]
   })
 </script>
 

diff --git 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)]
   })
 </script>