feat: Draft proposal

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

packages/svelte-query/package.json

@@ -14,6 +14,12 @@
     "type": "github",
     "url": "https://github.com/sponsors/tannerlinsley"
   },
+  "keywords": [
+    "tanstack",
+    "query",
+    "svelte",
+    "swr"
+  ],
   "scripts": {
     "clean": "premove ./dist ./coverage ./.svelte-kit ./dist-ts",
     "compile": "tsc --build",
@@ -42,18 +48,18 @@
     "src",
     "!src/__tests__"
   ],
-  "dependencies": {
-    "@tanstack/query-core": "workspace:*"
-  },
   "devDependencies": {
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tanstack/query-core": "workspace:*",
     "@testing-library/svelte": "^5.2.6",
     "eslint-plugin-svelte": "^2.46.0",
     "svelte": "^5.20.1",
-    "svelte-check": "^4.0.0"
+    "svelte-check": "^4.0.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "svelte": "^5.7.0"
   }
 }

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

@@ -0,0 +1,24 @@
+import { createSubscriber } from 'svelte/reactivity'
+
+type VoidFn = () => void
+type Subscriber = (update: VoidFn) => void | VoidFn
+
+export class ReactiveValue<T> {
+  #fn
+  #subscribe
+
+  constructor(fn: () => T, onSubscribe: Subscriber) {
+    this.#fn = fn
+    this.#subscribe = createSubscriber(onSubscribe)
+  }
+
+  get current() {
+    this.#subscribe()
+    return this.#fn()
+  }
+}
+
+export function createReactiveThunk<T>(fn: () => T, onSubscribe: Subscriber) {
+  const reactiveValue = new ReactiveValue(fn, onSubscribe)
+  return () => reactiveValue.current
+}

packages/svelte-query/src/context.ts

@@ -1,26 +1,26 @@
 import { getContext, setContext } from 'svelte'
 import type { QueryClient } from '@tanstack/query-core'
 
-const _contextKey = '$$_queryClient'
+const _contextKey = Symbol('QueryClient')
 
 /** Retrieves a Client from Svelte's context */
 export const getQueryClientContext = (): QueryClient => {
-  const client = getContext(_contextKey)
+  const client = getContext<QueryClient | undefined>(_contextKey)
   if (!client) {
     throw new Error(
       'No QueryClient was found in Svelte context. Did you forget to wrap your component with QueryClientProvider?',
     )
   }
 
-  return client as QueryClient
+  return client
 }
 
 /** Sets a QueryClient on Svelte's context */
 export const setQueryClientContext = (client: QueryClient): void => {
   setContext(_contextKey, client)
 }
 
-const _isRestoringContextKey = '$$_isRestoring'
+const _isRestoringContextKey = Symbol('isRestoring')
 
 /** Retrieves a `isRestoring` from Svelte's context */
 export const getIsRestoringContext = (): (() => boolean) => {

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

@@ -1,17 +1,8 @@
-import { notifyManager } from '@tanstack/query-core'
 import { useIsRestoring } from './useIsRestoring.js'
 import { useQueryClient } from './useQueryClient.js'
-import type {
-  CreateBaseQueryOptions,
-  CreateBaseQueryResult,
-  FunctionedParams,
-} from './types.js'
-import type {
-  QueryClient,
-  QueryKey,
-  QueryObserver,
-  QueryObserverResult,
-} from '@tanstack/query-core'
+import { createReactiveThunk } from './containers.svelte.js'
+import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types.js'
+import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
 
 export function createBaseQuery<
   TQueryFnData,
@@ -20,64 +11,56 @@ export function createBaseQuery<
   TQueryData,
   TQueryKey extends QueryKey,
 >(
-  options: FunctionedParams<
-    CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
+  options: CreateBaseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
   >,
   Observer: typeof QueryObserver,
   queryClient?: QueryClient,
-): CreateBaseQueryResult<TData, TError> {
+): () => CreateBaseQueryResult<TData, TError> {
   /** Load query client */
   const client = useQueryClient(queryClient)
-  const isRestoring = useIsRestoring()
+  const isRestoring = $derived.by(useIsRestoring())
 
   /** Creates a store that has the default options applied */
-  const defaultedOptions = $derived(() => {
-    const defaultOptions = client.defaultQueryOptions(options())
-    defaultOptions._optimisticResults = isRestoring()
-      ? 'isRestoring'
-      : 'optimistic'
-    defaultOptions.structuralSharing = false
-    return defaultOptions
+  const resolvedOptions = $derived.by(() => {
+    const opts = client.defaultQueryOptions(options)
+    opts._optimisticResults = isRestoring ? 'isRestoring' : 'optimistic'
+    opts.structuralSharing = false
+    return opts
   })
 
+  let updateEffects = () => {}
+
   /** Creates the observer */
   const observer = new Observer<
     TQueryFnData,
     TError,
     TData,
     TQueryData,
     TQueryKey
-  >(client, defaultedOptions())
+  >(client, resolvedOptions)
 
-  const result = $state<QueryObserverResult<TData, TError>>(
-    observer.getOptimisticResult(defaultedOptions()),
-  )
-
-  function updateResult(r: QueryObserverResult<TData, TError>) {
-    Object.assign(result, r)
-  }
-
-  $effect(() => {
-    const unsubscribe = isRestoring()
-      ? () => undefined
-      : observer.subscribe(() => {
-          notifyManager.batchCalls(() => {
-            updateResult(observer.getOptimisticResult(defaultedOptions()))
-          })()
-        })
-
-    observer.updateResult()
-    return () => unsubscribe()
-  })
-
-  /** Subscribe to changes in result and defaultedOptionsStore */
+  /** Subscribe to changes in result and defaultedOptions */
   $effect.pre(() => {
-    observer.setOptions(defaultedOptions(), { listeners: false })
-    updateResult(observer.getOptimisticResult(defaultedOptions()))
+    observer.setOptions(resolvedOptions, { listeners: false })
+    updateEffects()
   })
 
-  // Handle result property usage tracking
-  return !defaultedOptions().notifyOnChangeProps
-    ? observer.trackResult(result)
-    : result
+  return createReactiveThunk(
+    () => {
+      const result = observer.getOptimisticResult(resolvedOptions)
+      if (!resolvedOptions.notifyOnChangeProps) {
+        return observer.trackResult(result)
+      }
+      return result
+    },
+    (update) => {
+      updateEffects = update
+      return observer.subscribe(update)
+    },
+  )
 }

packages/svelte-query/src/createInfiniteQuery.ts

@@ -10,7 +10,6 @@ import type {
 import type {
   CreateInfiniteQueryOptions,
   CreateInfiniteQueryResult,
-  FunctionedParams,
 } from './types.js'
 
 export function createInfiniteQuery<
@@ -20,21 +19,19 @@ export function createInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  options: FunctionedParams<
-    CreateInfiniteQueryOptions<
-      TQueryFnData,
-      TError,
-      TData,
-      TQueryFnData,
-      TQueryKey,
-      TPageParam
-    >
+  options: CreateInfiniteQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryFnData,
+    TQueryKey,
+    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,12 +1,10 @@
-import { onDestroy } from 'svelte'
-
-import { MutationObserver, notifyManager } from '@tanstack/query-core'
+import { MutationObserver } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient.js'
+import { createReactiveThunk } from './containers.svelte.js'
 import type {
   CreateMutateFunction,
   CreateMutationOptions,
   CreateMutationResult,
-  FunctionedParams,
 } from './types.js'
 
 import type { DefaultError, QueryClient } from '@tanstack/query-core'
@@ -17,18 +15,14 @@ export function createMutation<
   TVariables = void,
   TContext = unknown,
 >(
-  options: FunctionedParams<
-    CreateMutationOptions<TData, TError, TVariables, TContext>
-  >,
+  options: CreateMutationOptions<TData, TError, TVariables, TContext>,
   queryClient?: QueryClient,
-): CreateMutationResult<TData, TError, TVariables, TContext> {
+): () => CreateMutationResult<TData, TError, TVariables, TContext> {
   const client = useQueryClient(queryClient)
 
-  const observer = $derived(
-    new MutationObserver<TData, TError, TVariables, TContext>(
-      client,
-      options(),
-    ),
+  const observer = new MutationObserver<TData, TError, TVariables, TContext>(
+    client,
+    options,
   )
 
   const mutate = $state<
@@ -37,35 +31,20 @@ export function createMutation<
     observer.mutate(variables, mutateOptions).catch(noop)
   })
 
-  $effect.pre(() => {
-    observer.setOptions(options())
-  })
-
-  const result = $state(observer.getCurrentResult())
-
-  const unsubscribe = observer.subscribe((val) => {
-    notifyManager.batchCalls(() => {
-      Object.assign(result, val)
-    })()
-  })
-
-  onDestroy(() => {
-    unsubscribe()
-  })
-
   // @ts-expect-error
-  return new Proxy(result, {
-    get: (_, prop) => {
-      const r = {
-        ...result,
-        mutate,
-        mutateAsync: result.mutate,
-      }
-      if (prop == 'value') return r
-      // @ts-expect-error
-      return r[prop]
+  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),
+  )
 }
 
 function noop() {}