@tanstack/svelte-query 5.90.2 → 6.0.1

package/src/createBaseQuery.svelte.ts

@@ -0,0 +1,107 @@
+import { useIsRestoring } from './useIsRestoring.js'
+import { useQueryClient } from './useQueryClient.js'
+import { createRawRef } from './containers.svelte.js'
+import { watchChanges } from './utils.svelte.js'
+import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
+import type {
+  Accessor,
+  CreateBaseQueryOptions,
+  CreateBaseQueryResult,
+} from './types.js'
+
+/**
+ * Base implementation for `createQuery` and `createInfiniteQuery`
+ * @param options - A function that returns query options
+ * @param Observer - The observer from query-core
+ * @param queryClient - Custom query client which overrides provider
+ */
+export function createBaseQuery<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryData,
+  TQueryKey extends QueryKey,
+>(
+  options: Accessor<
+    CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
+  >,
+  Observer: typeof QueryObserver,
+  queryClient?: Accessor<QueryClient>,
+): CreateBaseQueryResult<TData, TError> {
+  /** Load query client */
+  const client = $derived(useQueryClient(queryClient?.()))
+  const isRestoring = useIsRestoring()
+
+  const resolvedOptions = $derived.by(() => {
+    const opts = client.defaultQueryOptions(options())
+    opts._optimisticResults = isRestoring.current ? 'isRestoring' : 'optimistic'
+    return opts
+  })
+
+  /** Creates the observer */
+  // svelte-ignore state_referenced_locally - intentional, initial value
+  let observer = $state(
+    new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(
+      client,
+      resolvedOptions,
+    ),
+  )
+  watchChanges(
+    () => client,
+    'pre',
+    () => {
+      observer = new Observer<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryData,
+        TQueryKey
+      >(client, resolvedOptions)
+    },
+  )
+
+  function createResult() {
+    const result = observer.getOptimisticResult(resolvedOptions)
+    return !resolvedOptions.notifyOnChangeProps
+      ? observer.trackResult(result)
+      : result
+  }
+  const [query, update] = createRawRef(
+    // svelte-ignore state_referenced_locally - intentional, initial value
+    createResult(),
+  )
+
+  $effect(() => {
+    const unsubscribe = isRestoring.current
+      ? () => undefined
+      : observer.subscribe(() => update(createResult()))
+    observer.updateResult()
+    return unsubscribe
+  })
+
+  watchChanges(
+    () => resolvedOptions,
+    'pre',
+    () => {
+      observer.setOptions(resolvedOptions)
+    },
+  )
+  watchChanges(
+    () => [resolvedOptions, observer],
+    'pre',
+    () => {
+      // The only reason this is necessary is because of `isRestoring`.
+      // Because we don't subscribe while restoring, the following can occur:
+      // - `isRestoring` is true
+      // - `isRestoring` becomes false
+      // - `observer.subscribe` and `observer.updateResult` is called in the above effect,
+      //   but the subsequent `fetch` has already completed
+      // - `result` misses the intermediate restored-but-not-fetched state
+      //
+      // this could technically be its own effect but that doesn't seem necessary
+      update(createResult())
+    },
+  )
+
+  return query
+}

package/src/createInfiniteQuery.ts

@@ -1,5 +1,5 @@
 import { InfiniteQueryObserver } from '@tanstack/query-core'
-import { createBaseQuery } from './createBaseQuery.js'
+import { createBaseQuery } from './createBaseQuery.svelte.js'
 import type {
   DefaultError,
   InfiniteData,
@@ -8,9 +8,9 @@ import type {
   QueryObserver,
 } from '@tanstack/query-core'
 import type {
+  Accessor,
   CreateInfiniteQueryOptions,
   CreateInfiniteQueryResult,
-  StoreOrVal,
 } from './types.js'
 
 export function createInfiniteQuery<
@@ -20,7 +20,7 @@ export function createInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  options: StoreOrVal<
+  options: Accessor<
     CreateInfiniteQueryOptions<
       TQueryFnData,
       TError,
@@ -29,7 +29,7 @@ export function createInfiniteQuery<
       TPageParam
     >
   >,
-  queryClient?: QueryClient,
+  queryClient?: Accessor<QueryClient>,
 ): CreateInfiniteQueryResult<TData, TError> {
   return createBaseQuery(
     options,

package/src/createMutation.svelte.ts

@@ -0,0 +1,91 @@
+import { MutationObserver, noop, notifyManager } from '@tanstack/query-core'
+import { useQueryClient } from './useQueryClient.js'
+import { watchChanges } from './utils.svelte.js'
+import type {
+  Accessor,
+  CreateMutateFunction,
+  CreateMutationOptions,
+  CreateMutationResult,
+} from './types.js'
+
+import type { DefaultError, QueryClient } from '@tanstack/query-core'
+
+/**
+ * @param options - A function that returns mutation options
+ * @param queryClient - Custom query client which overrides provider
+ */
+export function createMutation<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+>(
+  options: Accessor<CreateMutationOptions<TData, TError, TVariables, TContext>>,
+  queryClient?: Accessor<QueryClient>,
+): CreateMutationResult<TData, TError, TVariables, TContext> {
+  const client = $derived(useQueryClient(queryClient?.()))
+
+  // svelte-ignore state_referenced_locally - intentional, initial value
+  let observer = $state(
+    // svelte-ignore state_referenced_locally - intentional, initial value
+    new MutationObserver<TData, TError, TVariables, TContext>(
+      client,
+      options(),
+    ),
+  )
+
+  watchChanges(
+    () => client,
+    'pre',
+    () => {
+      observer = new MutationObserver(client, options())
+    },
+  )
+
+  $effect.pre(() => {
+    observer.setOptions(options())
+  })
+
+  const mutate = <CreateMutateFunction<TData, TError, TVariables, TContext>>((
+    variables,
+    mutateOptions,
+  ) => {
+    observer.mutate(variables, mutateOptions).catch(noop)
+  })
+
+  let result = $state(observer.getCurrentResult())
+  watchChanges(
+    () => observer,
+    'pre',
+    () => {
+      result = observer.getCurrentResult()
+    },
+  )
+
+  $effect.pre(() => {
+    const unsubscribe = observer.subscribe((val) => {
+      notifyManager.batchCalls(() => {
+        Object.assign(result, val)
+      })()
+    })
+    return unsubscribe
+  })
+
+  const resultProxy = $derived(
+    new Proxy(result, {
+      get: (_, prop) => {
+        const r = {
+          ...result,
+          mutate,
+          mutateAsync: result.mutate,
+        }
+        if (prop == 'value') return r
+        // @ts-expect-error
+        return r[prop]
+      },
+    }),
+  )
+
+  // @ts-expect-error
+  return resultProxy
+}

package/src/{createQueries.ts → createQueries.svelte.ts}

@@ -1,33 +1,33 @@
-import { QueriesObserver, noop, notifyManager } from '@tanstack/query-core'
-import { derived, get, readable } from 'svelte/store'
+import { QueriesObserver } from '@tanstack/query-core'
 import { useIsRestoring } from './useIsRestoring.js'
+import { createRawRef } from './containers.svelte.js'
 import { useQueryClient } from './useQueryClient.js'
-import { isSvelteStore } from './utils.js'
-import type { Readable } from 'svelte/store'
-import type { StoreOrVal } from './types.js'
+import type {
+  Accessor,
+  CreateQueryOptions,
+  CreateQueryResult,
+  DefinedCreateQueryResult,
+} from './types.js'
 import type {
   DefaultError,
-  DefinedQueryObserverResult,
   OmitKeyof,
   QueriesObserverOptions,
   QueriesPlaceholderDataFunction,
   QueryClient,
   QueryFunction,
   QueryKey,
-  QueryObserverOptions,
-  QueryObserverResult,
   ThrowOnError,
 } from '@tanstack/query-core'
 
 // This defines the `CreateQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
 // `placeholderData` function always gets undefined passed
-type QueryObserverOptionsForCreateQueries<
+type CreateQueryOptionsForCreateQueries<
   TQueryFnData = unknown,
   TError = DefaultError,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 > = OmitKeyof<
-  QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>,
+  CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
   'placeholderData'
 > & {
   placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction<TQueryFnData>
@@ -37,60 +37,60 @@ type QueryObserverOptionsForCreateQueries<
 type MAXIMUM_DEPTH = 20
 
 // Widen the type of the symbol to enable type inference even if skipToken is not immutable.
-type SkipTokenForUseQueries = symbol
+type SkipTokenForCreateQueries = symbol
 
-type GetQueryObserverOptionsForCreateQueries<T> =
+type GetCreateQueryOptionsForCreateQueries<T> =
   // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }
   T extends {
     queryFnData: infer TQueryFnData
     error?: infer TError
     data: infer TData
   }
-    ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError, TData>
+    ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError, TData>
     : T extends { queryFnData: infer TQueryFnData; error?: infer TError }
-      ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError>
+      ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError>
       : T extends { data: infer TData; error?: infer TError }
-        ? QueryObserverOptionsForCreateQueries<unknown, TError, TData>
+        ? CreateQueryOptionsForCreateQueries<unknown, TError, TData>
         : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]
           T extends [infer TQueryFnData, infer TError, infer TData]
-          ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError, TData>
+          ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError, TData>
           : T extends [infer TQueryFnData, infer TError]
-            ? QueryObserverOptionsForCreateQueries<TQueryFnData, TError>
+            ? CreateQueryOptionsForCreateQueries<TQueryFnData, TError>
             : T extends [infer TQueryFnData]
-              ? QueryObserverOptionsForCreateQueries<TQueryFnData>
+              ? CreateQueryOptionsForCreateQueries<TQueryFnData>
               : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided
                 T extends {
                     queryFn?:
                       | QueryFunction<infer TQueryFnData, infer TQueryKey>
-                      | SkipTokenForUseQueries
+                      | SkipTokenForCreateQueries
                     select?: (data: any) => infer TData
                     throwOnError?: ThrowOnError<any, infer TError, any, any>
                   }
-                ? QueryObserverOptionsForCreateQueries<
+                ? CreateQueryOptionsForCreateQueries<
                     TQueryFnData,
                     unknown extends TError ? DefaultError : TError,
                     unknown extends TData ? TQueryFnData : TData,
                     TQueryKey
                   >
                 : // Fallback
-                  QueryObserverOptionsForCreateQueries
+                  CreateQueryOptionsForCreateQueries
 
-// A defined initialData setting should return a DefinedQueryObserverResult rather than CreateQueryResult
+// A defined initialData setting should return a DefinedCreateQueryResult rather than CreateQueryResult
 type GetDefinedOrUndefinedQueryResult<T, TData, TError = unknown> = T extends {
   initialData?: infer TInitialData
 }
   ? unknown extends TInitialData
-    ? QueryObserverResult<TData, TError>
+    ? CreateQueryResult<TData, TError>
     : TInitialData extends TData
-      ? DefinedQueryObserverResult<TData, TError>
+      ? DefinedCreateQueryResult<TData, TError>
       : TInitialData extends () => infer TInitialDataResult
         ? unknown extends TInitialDataResult
-          ? QueryObserverResult<TData, TError>
+          ? CreateQueryResult<TData, TError>
           : TInitialDataResult extends TData
-            ? DefinedQueryObserverResult<TData, TError>
-            : QueryObserverResult<TData, TError>
-        : QueryObserverResult<TData, TError>
-  : QueryObserverResult<TData, TError>
+            ? DefinedCreateQueryResult<TData, TError>
+            : CreateQueryResult<TData, TError>
+        : CreateQueryResult<TData, TError>
+  : CreateQueryResult<TData, TError>
 
 type GetCreateQueryResult<T> =
   // Part 1: responsible for mapping explicit type parameter to function result, if object
@@ -111,7 +111,7 @@ type GetCreateQueryResult<T> =
                 T extends {
                     queryFn?:
                       | QueryFunction<infer TQueryFnData, any>
-                      | SkipTokenForUseQueries
+                      | SkipTokenForCreateQueries
                     select?: (data: any) => infer TData
                     throwOnError?: ThrowOnError<any, infer TError, any, any>
                   }
@@ -121,7 +121,7 @@ type GetCreateQueryResult<T> =
                     unknown extends TError ? DefaultError : TError
                   >
                 : // Fallback
-                  QueryObserverResult
+                  CreateQueryResult
 
 /**
  * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param
@@ -131,15 +131,15 @@ export type QueriesOptions<
   TResults extends Array<any> = [],
   TDepth extends ReadonlyArray<number> = [],
 > = TDepth['length'] extends MAXIMUM_DEPTH
-  ? Array<QueryObserverOptionsForCreateQueries>
+  ? Array<CreateQueryOptionsForCreateQueries>
   : T extends []
     ? []
     : T extends [infer Head]
-      ? [...TResults, GetQueryObserverOptionsForCreateQueries<Head>]
+      ? [...TResults, GetCreateQueryOptionsForCreateQueries<Head>]
       : T extends [infer Head, ...infer Tails]
         ? QueriesOptions<
             [...Tails],
-            [...TResults, GetQueryObserverOptionsForCreateQueries<Head>],
+            [...TResults, GetCreateQueryOptionsForCreateQueries<Head>],
             [...TDepth, 1]
           >
         : ReadonlyArray<unknown> extends T
@@ -147,7 +147,7 @@ export type QueriesOptions<
           : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type!
             // use this to infer the param types in the case of Array.map() argument
             T extends Array<
-                QueryObserverOptionsForCreateQueries<
+                CreateQueryOptionsForCreateQueries<
                   infer TQueryFnData,
                   infer TError,
                   infer TData,
@@ -155,7 +155,7 @@ export type QueriesOptions<
                 >
               >
             ? Array<
-                QueryObserverOptionsForCreateQueries<
+                CreateQueryOptionsForCreateQueries<
                   TQueryFnData,
                   TError,
                   TData,
@@ -163,7 +163,7 @@ export type QueriesOptions<
                 >
               >
             : // Fallback
-              Array<QueryObserverOptionsForCreateQueries>
+              Array<CreateQueryOptionsForCreateQueries>
 
 /**
  * QueriesResults reducer recursively maps type param to results
@@ -173,7 +173,7 @@ export type QueriesResults<
   TResults extends Array<any> = [],
   TDepth extends ReadonlyArray<number> = [],
 > = TDepth['length'] extends MAXIMUM_DEPTH
-  ? Array<QueryObserverResult>
+  ? Array<CreateQueryResult>
   : T extends []
     ? []
     : T extends [infer Head]
@@ -190,75 +190,65 @@ export function createQueries<
   T extends Array<any>,
   TCombinedResult = QueriesResults<T>,
 >(
-  {
-    queries,
-    ...options
-  }: {
+  createQueriesOptions: Accessor<{
     queries:
-      | StoreOrVal<[...QueriesOptions<T>]>
-      | StoreOrVal<
-          [...{ [K in keyof T]: GetQueryObserverOptionsForCreateQueries<T[K]> }]
-        >
+      | readonly [...QueriesOptions<T>]
+      | readonly [
+          ...{ [K in keyof T]: GetCreateQueryOptionsForCreateQueries<T[K]> },
+        ]
     combine?: (result: QueriesResults<T>) => TCombinedResult
-  },
-  queryClient?: QueryClient,
-): Readable<TCombinedResult> {
-  const client = useQueryClient(queryClient)
+  }>,
+  queryClient?: Accessor<QueryClient>,
+): TCombinedResult {
+  const client = $derived(useQueryClient(queryClient?.()))
   const isRestoring = useIsRestoring()
 
-  const queriesStore = isSvelteStore(queries) ? queries : readable(queries)
-
-  const defaultedQueriesStore = derived(
-    [queriesStore, isRestoring],
-    ([$queries, $isRestoring]) => {
-      return $queries.map((opts) => {
-        const defaultedOptions = client.defaultQueryOptions(
-          opts as QueryObserverOptions,
-        )
-        // Make sure the results are already in fetching state before subscribing or updating options
-        defaultedOptions._optimisticResults = $isRestoring
-          ? 'isRestoring'
-          : 'optimistic'
-        return defaultedOptions
-      })
-    },
+  const { queries, combine } = $derived.by(createQueriesOptions)
+  const resolvedQueryOptions = $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.current
+        ? 'isRestoring'
+        : 'optimistic'
+      return resolvedOptions
+    }),
   )
-  const observer = new QueriesObserver<TCombinedResult>(
-    client,
-    get(defaultedQueriesStore),
-    options as QueriesObserverOptions<TCombinedResult>,
+
+  // can't do same as createMutation, as QueriesObserver has no `setOptions` method
+  const observer = $derived(
+    new QueriesObserver<TCombinedResult>(
+      client,
+      resolvedQueryOptions,
+      combine as QueriesObserverOptions<TCombinedResult>,
+    ),
   )
 
-  defaultedQueriesStore.subscribe(($defaultedQueries) => {
-    // Do not notify on updates because of changes in the options because
-    // these changes should already be reflected in the optimistic result.
-    observer.setQueries(
-      $defaultedQueries,
-      options as QueriesObserverOptions<TCombinedResult>,
+  function createResult() {
+    const [_, getCombinedResult, trackResult] = observer.getOptimisticResult(
+      resolvedQueryOptions,
+      combine as QueriesObserverOptions<TCombinedResult>['combine'],
     )
-  })
+    return getCombinedResult(trackResult())
+  }
 
-  const result = derived([isRestoring], ([$isRestoring], set) => {
-    const unsubscribe = $isRestoring
-      ? noop
-      : observer.subscribe(notifyManager.batchCalls(set))
+  // @ts-expect-error - the crazy-complex TCombinedResult type doesn't like being called an array
+  // svelte-ignore state_referenced_locally
+  const [results, update] = createRawRef<TCombinedResult>(createResult())
 
-    return () => unsubscribe()
+  $effect(() => {
+    const unsubscribe = isRestoring.current
+      ? () => undefined
+      : observer.subscribe(() => update(createResult()))
+    return unsubscribe
   })
 
-  const { subscribe } = derived(
-    [result, defaultedQueriesStore],
-    // @ts-expect-error svelte-check thinks this is unused
-    ([$result, $defaultedQueriesStore]) => {
-      const [rawResult, combineResult, trackResult] =
-        observer.getOptimisticResult(
-          $defaultedQueriesStore,
-          (options as QueriesObserverOptions<TCombinedResult>).combine,
-        )
-      $result = rawResult
-      return combineResult(trackResult())
-    },
-  )
+  $effect.pre(() => {
+    observer.setQueries(resolvedQueryOptions, {
+      combine,
+    } as QueriesObserverOptions<TCombinedResult>)
+    update(createResult())
+  })
 
-  return { subscribe }
+  return results
 }

package/src/createQuery.ts

@@ -1,11 +1,11 @@
 import { QueryObserver } from '@tanstack/query-core'
-import { createBaseQuery } from './createBaseQuery.js'
+import { createBaseQuery } from './createBaseQuery.svelte.js'
 import type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'
 import type {
+  Accessor,
   CreateQueryOptions,
   CreateQueryResult,
   DefinedCreateQueryResult,
-  StoreOrVal,
 } from './types.js'
 import type {
   DefinedInitialDataOptions,
@@ -18,11 +18,11 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: StoreOrVal<
-    DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+  options: Accessor<
+    UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
   >,
-  queryClient?: QueryClient,
-): DefinedCreateQueryResult<TData, TError>
+  queryClient?: Accessor<QueryClient>,
+): CreateQueryResult<TData, TError>
 
 export function createQuery<
   TQueryFnData = unknown,
@@ -30,27 +30,25 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: StoreOrVal<
-    UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+  options: Accessor<
+    DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
   >,
-  queryClient?: QueryClient,
-): CreateQueryResult<TData, TError>
+  queryClient?: Accessor<QueryClient>,
+): DefinedCreateQueryResult<TData, TError>
 
 export function createQuery<
-  TQueryFnData = unknown,
+  TQueryFnData,
   TError = DefaultError,
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: StoreOrVal<
-    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>
-  >,
-  queryClient?: QueryClient,
+  options: Accessor<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>>,
+  queryClient?: Accessor<QueryClient>,
 ): CreateQueryResult<TData, TError>
 
 export function createQuery(
-  options: StoreOrVal<CreateQueryOptions>,
-  queryClient?: QueryClient,
+  options: Accessor<CreateQueryOptions>,
+  queryClient?: Accessor<QueryClient>,
 ) {
   return createBaseQuery(options, QueryObserver, queryClient)
 }

package/src/index.ts

@@ -8,20 +8,20 @@ export * from './types.js'
 export * from './context.js'
 
 export { createQuery } from './createQuery.js'
-export type { QueriesResults, QueriesOptions } from './createQueries.js'
+export type { QueriesResults, QueriesOptions } from './createQueries.svelte.js'
 export type {
   DefinedInitialDataOptions,
   UndefinedInitialDataOptions,
 } from './queryOptions.js'
 export { queryOptions } from './queryOptions.js'
-export { createQueries } from './createQueries.js'
+export { createQueries } from './createQueries.svelte.js'
 export { createInfiniteQuery } from './createInfiniteQuery.js'
 export { infiniteQueryOptions } from './infiniteQueryOptions.js'
-export { createMutation } from './createMutation.js'
-export { useMutationState } from './useMutationState.js'
+export { createMutation } from './createMutation.svelte.js'
+export { useMutationState } from './useMutationState.svelte.js'
 export { useQueryClient } from './useQueryClient.js'
-export { useIsFetching } from './useIsFetching.js'
-export { useIsMutating } from './useIsMutating.js'
+export { useIsFetching } from './useIsFetching.svelte.js'
+export { useIsMutating } from './useIsMutating.svelte.js'
 export { useIsRestoring } from './useIsRestoring.js'
 export { useHydrate } from './useHydrate.js'
 export { default as HydrationBoundary } from './HydrationBoundary.svelte'