fix: Update API, add a bunch of tests

Author: elliott-with-the-longest-name-on-github

packages/svelte-query/package.json

@@ -26,7 +26,7 @@
     "test:types": "svelte-check --tsconfig ./tsconfig.json",
     "test:eslint": "eslint ./src",
     "test:lib": "vitest run",
-    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:lib:dev": "vitest",
     "test:build": "publint --strict && attw --pack",
     "build": "svelte-package --input ./src --output ./dist"
   },

packages/svelte-query/src/containers.svelte.ts

@@ -1,37 +1,16 @@
+import { tick, untrack } from 'svelte'
 import { createSubscriber } from 'svelte/reactivity'
 
 type VoidFn = () => void
 type Subscriber = (update: VoidFn) => void | VoidFn
-type Effect =
-  | { type: 'pre'; fn: Subscriber }
-  | { type: 'regular'; fn: Subscriber }
 
-export class ReactiveValue<T> {
+export class ReactiveValue<T> implements Box<T> {
   #fn
   #subscribe
 
-  constructor(
-    fn: () => T,
-    onSubscribe: Subscriber,
-    effects: Array<Effect> = [],
-  ) {
+  constructor(fn: () => T, onSubscribe: Subscriber) {
     this.#fn = fn
-    this.#subscribe = createSubscriber((update) => {
-      const cleanup = $effect.root(() => {
-        for (const effect of effects) {
-          if (effect.type === 'pre') {
-            $effect.pre(() => effect.fn(update))
-          } else {
-            $effect(() => effect.fn(update))
-          }
-        }
-      })
-      const off = onSubscribe(update)
-      return () => {
-        cleanup()
-        off?.()
-      }
-    })
+    this.#subscribe = createSubscriber((update) => onSubscribe(update))
   }
 
   get current() {
@@ -40,11 +19,44 @@ export class ReactiveValue<T> {
   }
 }
 
-export function createReactiveThunk<T>(
-  fn: () => T,
-  onSubscribe: Subscriber,
-  effects?: Array<Effect>,
-) {
-  const reactiveValue = new ReactiveValue(fn, onSubscribe, effects)
-  return () => reactiveValue.current
+export type Box<T> = { current: T }
+
+export function box<T>(value: T): Box<T> {
+  let current = $state(value)
+  return {
+    get current() {
+      return current
+    },
+    set current(newValue) {
+      current = newValue
+    },
+  }
+}
+
+/**
+ * Makes all of the top-level keys of an object into $state.raw fields whose initial values
+ * are the same as in the original object. Does not mutate the original object. Provides an `update`
+ * function that _can_ (but does not have to be) be used to replace all of the object's top-level keys
+ * with the values of the new object, while maintaining the original root object's reference.
+ */
+export function createRawRef<T extends {} | Array<unknown>>(
+  init: T,
+): [T, (newValue: T) => void] {
+  const out = (Array.isArray(init) ? [] : {}) as T
+
+  function update(newValue: T) {
+    Object.assign(out, newValue)
+  }
+
+  for (const [key, value] of Object.entries(init)) {
+    let state = $state.raw(value)
+    Object.defineProperty(out, key, {
+      enumerable: true,
+      get: () => state,
+      set: (v) => {
+        state = v
+      },
+    })
+  }
+  return [out, update]
 }

packages/svelte-query/src/context.ts

@@ -1,5 +1,6 @@
 import { getContext, setContext } from 'svelte'
 import type { QueryClient } from '@tanstack/query-core'
+import type { Box, ReactiveValue } from './containers.svelte'
 
 const _contextKey = Symbol('QueryClient')
 
@@ -23,18 +24,18 @@ export const setQueryClientContext = (client: QueryClient): void => {
 const _isRestoringContextKey = Symbol('isRestoring')
 
 /** Retrieves a `isRestoring` from Svelte's context */
-export const getIsRestoringContext = (): (() => boolean) => {
+export const getIsRestoringContext = (): Box<boolean> => {
   try {
-    const isRestoring = getContext<(() => boolean) | undefined>(
+    const isRestoring = getContext<Box<boolean> | undefined>(
       _isRestoringContextKey,
     )
-    return isRestoring ?? (() => false)
+    return isRestoring ?? { current: false }
   } catch (error) {
-    return () => false
+    return { current: false }
   }
 }
 
 /** Sets a `isRestoring` on Svelte's context */
-export const setIsRestoringContext = (isRestoring: () => boolean): void => {
+export const setIsRestoringContext = (isRestoring: Box<boolean>): void => {
   setContext(_isRestoringContextKey, isRestoring)
 }

packages/svelte-query/src/createBaseQuery.svelte.ts

@@ -1,8 +1,8 @@
 import { useIsRestoring } from './useIsRestoring.js'
 import { useQueryClient } from './useQueryClient.js'
-import { createReactiveThunk } from './containers.svelte.js'
-import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types.js'
+import { createRawRef } from './containers.svelte.js'
 import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
+import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types.js'
 
 export function createBaseQuery<
   TQueryFnData,
@@ -20,15 +20,16 @@ export function createBaseQuery<
   >,
   Observer: typeof QueryObserver,
   queryClient?: QueryClient,
-): () => CreateBaseQueryResult<TData, TError> {
+): CreateBaseQueryResult<TData, TError> {
   /** Load query client */
+  console.log('createBaseQuery', options)
   const client = useQueryClient(queryClient)
-  const isRestoring = $derived.by(useIsRestoring())
+  const isRestoring = useIsRestoring()
 
   /** Creates a store that has the default options applied */
   const resolvedOptions = $derived.by(() => {
     const opts = client.defaultQueryOptions(options)
-    opts._optimisticResults = isRestoring ? 'isRestoring' : 'optimistic'
+    opts._optimisticResults = isRestoring.current ? 'isRestoring' : 'optimistic'
     opts.structuralSharing = false
     return opts
   })
@@ -42,23 +43,25 @@ export function createBaseQuery<
     TQueryKey
   >(client, resolvedOptions)
 
-  return createReactiveThunk(
-    () => {
+  let [query, update] = createRawRef(
+    observer.getOptimisticResult(resolvedOptions),
+  )
+
+  // if you update this effect in the future, _make sure_ the unsubscribe function is still being returned
+  $effect(() =>
+    observer.subscribe(() => {
       const result = observer.getOptimisticResult(resolvedOptions)
-      if (!resolvedOptions.notifyOnChangeProps) {
-        return observer.trackResult(result)
-      }
-      return result
-    },
-    (update) => observer.subscribe(update),
-    [
-      {
-        type: 'pre',
-        fn: (update) => {
-          observer.setOptions(resolvedOptions, { listeners: false })
-          update()
-        },
-      },
-    ],
+      update(result)
+    }),
   )
+
+  $effect.pre(() => {
+    observer.setOptions(resolvedOptions, { listeners: false })
+    const result = observer.getOptimisticResult(resolvedOptions)
+    update(result)
+  })
+
+  return resolvedOptions.notifyOnChangeProps
+    ? observer.trackResult(query)
+    : query
 }

packages/svelte-query/src/createInfiniteQuery.ts

@@ -28,10 +28,10 @@ export function createInfiniteQuery<
     TPageParam
   >,
   queryClient?: QueryClient,
-): () => CreateInfiniteQueryResult<TData, TError> {
+): CreateInfiniteQueryResult<TData, TError> {
   return createBaseQuery(
     options,
     InfiniteQueryObserver as typeof QueryObserver,
     queryClient,
-  ) as () => CreateInfiniteQueryResult<TData, TError>
+  ) as CreateInfiniteQueryResult<TData, TError>
 }

packages/svelte-query/src/createMutation.svelte.ts

@@ -1,6 +1,6 @@
 import { MutationObserver } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient.js'
-import { createReactiveThunk } from './containers.svelte.js'
+import { createRawRef } from './containers.svelte.js'
 import type {
   CreateMutateFunction,
   CreateMutationOptions,
@@ -31,20 +31,23 @@ export function createMutation<
     observer.mutate(variables, mutateOptions).catch(noop)
   })
 
+  function createResult() {
+    const result = observer.getCurrentResult()
+    Object.defineProperty(result, 'mutateAsync', {
+      value: result.mutate,
+    })
+    Object.defineProperty(result, 'mutate', {
+      value: mutate,
+    })
+    return result
+  }
+
+  let [mutation, update] = createRawRef(createResult())
+
+  $effect(() => update(createResult()))
+
   // @ts-expect-error
-  return createReactiveThunk(
-    () => {
-      const result = observer.getCurrentResult()
-      Object.defineProperty(result, 'mutateAsync', {
-        value: result.mutate,
-      })
-      Object.defineProperty(result, 'mutate', {
-        value: mutate,
-      })
-      return result
-    },
-    (update) => observer.subscribe(update),
-  )
+  return mutation
 }
 
 function noop() {}

packages/svelte-query/src/createQueries.svelte.ts

@@ -1,7 +1,7 @@
 import { QueriesObserver } from '@tanstack/query-core'
 import { useIsRestoring } from './useIsRestoring.js'
 import { useQueryClient } from './useQueryClient.js'
-import { createReactiveThunk } from './containers.svelte.js'
+import { createRawRef } from './containers.svelte.js'
 import type {
   DefaultError,
   DefinedQueryObserverResult,
@@ -197,15 +197,15 @@ export function createQueries<
     subscribed?: boolean
   },
   queryClient?: QueryClient,
-): () => TCombinedResult {
+): TCombinedResult {
   const client = useQueryClient(queryClient)
-  const isRestoring = $derived.by(useIsRestoring())
+  const isRestoring = useIsRestoring()
 
   const resolvedQueries = $derived(
     queries.map((opts) => {
       const resolvedOptions = client.defaultQueryOptions(opts)
       // Make sure the results are already in fetching state before subscribing or updating options
-      resolvedOptions._optimisticResults = isRestoring
+      resolvedOptions._optimisticResults = isRestoring.current
         ? 'isRestoring'
         : 'optimistic'
       return resolvedOptions
@@ -218,36 +218,32 @@ export function createQueries<
     combine as QueriesObserverOptions<TCombinedResult>,
   )
 
-  return createReactiveThunk(
-    () => {
-      const [_, getCombinedResult, trackResult] = observer.getOptimisticResult(
-        resolvedQueries,
-        combine as QueriesObserverOptions<TCombinedResult>['combine'],
-      )
-      return getCombinedResult(trackResult())
-    },
-    () => {},
-    [
-      {
-        type: 'pre',
-        fn: (update) => {
-          observer.setQueries(
-            resolvedQueries,
-            { combine } as QueriesObserverOptions<TCombinedResult>,
-            { listeners: false },
-          )
-          update()
-        },
-      },
-      {
-        type: 'regular',
-        fn: (update) => {
-          if (isRestoring || subscribed === false) {
-            return
-          }
-          observer.subscribe(update)
-        },
-      },
-    ],
-  )
+  function createResult() {
+    const [_, getCombinedResult, trackResult] = observer.getOptimisticResult(
+      resolvedQueries,
+      combine as QueriesObserverOptions<TCombinedResult>['combine'],
+    )
+    return getCombinedResult(trackResult())
+  }
+
+  // @ts-expect-error - the crazy-complex TCombinedResult type doesn't like being called an array
+  let [results, update] = createRawRef<TCombinedResult>(createResult())
+
+  $effect(() => {
+    if (isRestoring.current || subscribed === false) {
+      return
+    }
+    return observer.subscribe(() => update(createResult()))
+  })
+
+  $effect.pre(() => {
+    observer.setQueries(
+      resolvedQueries,
+      { combine } as QueriesObserverOptions<TCombinedResult>,
+      { listeners: false },
+    )
+    update(createResult())
+  })
+
+  return results
 }

packages/svelte-query/src/createQuery.ts

@@ -19,7 +19,7 @@ export function createQuery<
 >(
   options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
   queryClient?: QueryClient,
-): () => DefinedCreateQueryResult<TData, TError>
+): DefinedCreateQueryResult<TData, TError>
 
 export function createQuery<
   TQueryFnData = unknown,
@@ -29,7 +29,7 @@ export function createQuery<
 >(
   options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
   queryClient?: QueryClient,
-): () => CreateQueryResult<TData, TError>
+): CreateQueryResult<TData, TError>
 
 export function createQuery<
   TQueryFnData = unknown,
@@ -39,7 +39,7 @@ export function createQuery<
 >(
   options: CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   queryClient?: QueryClient,
-): () => CreateQueryResult<TData, TError>
+): CreateQueryResult<TData, TError>
 
 export function createQuery(
   options: CreateQueryOptions,