@tanstack/svelte-query 5.0.0-alpha.0 → 5.0.0-alpha.1

package/build/lib/createBaseQuery.d.ts

@@ -1,3 +1,3 @@
 import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core';
-import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types';
-export declare function createBaseQuery<TQueryFnData, TError, TData, TQueryData, TQueryKey extends QueryKey>(options: CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>, Observer: typeof QueryObserver, queryClient?: QueryClient): CreateBaseQueryResult<TData, TError>;
+import type { CreateBaseQueryOptions, CreateBaseQueryResult, WritableOrVal } from './types';
+export declare function createBaseQuery<TQueryFnData, TError, TData, TQueryData, TQueryKey extends QueryKey>(options: WritableOrVal<CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>>, Observer: typeof QueryObserver, queryClient?: QueryClient): CreateBaseQueryResult<TData, TError>;

package/build/lib/createBaseQuery.js

@@ -1,33 +1,37 @@
 import { notifyManager } from '@tanstack/query-core';
 import { useQueryClient } from './useQueryClient';
-import { derived, readable } from 'svelte/store';
+import { derived, get, readable, writable } from 'svelte/store';
+import { isWritable } from './utils';
 export function createBaseQuery(options, Observer, queryClient) {
     const client = useQueryClient(queryClient);
-    const defaultedOptions = client.defaultQueryOptions(options);
-    defaultedOptions._optimisticResults = 'optimistic';
-    let observer = new Observer(client, defaultedOptions);
-    // Include callbacks in batch renders
-    if (defaultedOptions.onError) {
-        defaultedOptions.onError = notifyManager.batchCalls(defaultedOptions.onError);
-    }
-    if (defaultedOptions.onSuccess) {
-        defaultedOptions.onSuccess = notifyManager.batchCalls(defaultedOptions.onSuccess);
-    }
-    if (defaultedOptions.onSettled) {
-        defaultedOptions.onSettled = notifyManager.batchCalls(defaultedOptions.onSettled);
-    }
-    readable(observer).subscribe(($observer) => {
-        observer = $observer;
+    const optionsStore = isWritable(options) ? options : writable(options);
+    const defaultedOptionsStore = derived(optionsStore, ($options) => {
+        const defaultedOptions = client.defaultQueryOptions($options);
+        defaultedOptions._optimisticResults = 'optimistic';
+        // Include callbacks in batch renders
+        if (defaultedOptions.onError) {
+            defaultedOptions.onError = notifyManager.batchCalls(defaultedOptions.onError);
+        }
+        if (defaultedOptions.onSuccess) {
+            defaultedOptions.onSuccess = notifyManager.batchCalls(defaultedOptions.onSuccess);
+        }
+        if (defaultedOptions.onSettled) {
+            defaultedOptions.onSettled = notifyManager.batchCalls(defaultedOptions.onSettled);
+        }
+        return defaultedOptions;
+    });
+    const observer = new Observer(client, get(defaultedOptionsStore));
+    defaultedOptionsStore.subscribe(($defaultedOptions) => {
         // Do not notify on updates because of changes in the options because
         // these changes should already be reflected in the optimistic result.
-        observer.setOptions(defaultedOptions, { listeners: false });
+        observer.setOptions($defaultedOptions, { listeners: false });
     });
     const result = readable(observer.getCurrentResult(), (set) => {
         return observer.subscribe(notifyManager.batchCalls(set));
     });
     const { subscribe } = derived(result, ($result) => {
-        $result = observer.getOptimisticResult(defaultedOptions);
-        return !defaultedOptions.notifyOnChangeProps
+        $result = observer.getOptimisticResult(get(defaultedOptionsStore));
+        return !get(defaultedOptionsStore).notifyOnChangeProps
             ? observer.trackResult($result)
             : $result;
     });

package/build/lib/createInfiniteQuery.d.ts

@@ -1,3 +1,3 @@
 import type { QueryKey, QueryClient, RegisteredError, InfiniteData } from '@tanstack/query-core';
-import type { CreateInfiniteQueryOptions, CreateInfiniteQueryResult } from './types';
-export declare function createInfiniteQuery<TQueryFnData, TError = RegisteredError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey, TPageParam>, queryClient?: QueryClient): CreateInfiniteQueryResult<TData, TError>;
+import type { CreateInfiniteQueryOptions, CreateInfiniteQueryResult, WritableOrVal } from './types';
+export declare function createInfiniteQuery<TQueryFnData, TError = RegisteredError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: WritableOrVal<CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey, TPageParam>>, queryClient?: QueryClient): CreateInfiniteQueryResult<TData, TError>;

package/build/lib/createInfiniteQuery.js

@@ -1,5 +1,7 @@
 import { InfiniteQueryObserver } from '@tanstack/query-core';
 import { createBaseQuery } from './createBaseQuery';
 export function createInfiniteQuery(options, queryClient) {
-    return createBaseQuery(options, InfiniteQueryObserver, queryClient);
+    return createBaseQuery(options, 
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    InfiniteQueryObserver, queryClient);
 }

package/build/lib/createMutation.d.ts

@@ -1,3 +1,3 @@
 import type { QueryClient, RegisteredError } from '@tanstack/query-core';
-import type { CreateMutationOptions, CreateMutationResult } from './types';
-export declare function createMutation<TData = unknown, TError = RegisteredError, TVariables = void, TContext = unknown>(options: CreateMutationOptions<TData, TError, TVariables, TContext>, queryClient?: QueryClient): CreateMutationResult<TData, TError, TVariables, TContext>;
+import type { CreateMutationOptions, CreateMutationResult, WritableOrVal } from './types';
+export declare function createMutation<TData = unknown, TError = RegisteredError, TVariables = void, TContext = unknown>(options: WritableOrVal<CreateMutationOptions<TData, TError, TVariables, TContext>>, queryClient?: QueryClient): CreateMutationResult<TData, TError, TVariables, TContext>;

package/build/lib/createMutation.js

@@ -1,16 +1,17 @@
-import { readable, derived } from 'svelte/store';
+import { readable, derived, writable, get } from 'svelte/store';
 import { MutationObserver, notifyManager } from '@tanstack/query-core';
 import { useQueryClient } from './useQueryClient';
+import { isWritable } from './utils';
 export function createMutation(options, queryClient) {
     const client = useQueryClient(queryClient);
-    let observer = new MutationObserver(client, options);
+    const optionsStore = isWritable(options) ? options : writable(options);
+    const observer = new MutationObserver(client, get(optionsStore));
     let mutate;
-    readable(observer).subscribe(($observer) => {
-        observer = $observer;
+    optionsStore.subscribe(($options) => {
         mutate = (variables, mutateOptions) => {
             observer.mutate(variables, mutateOptions).catch(noop);
         };
-        observer.setOptions(options);
+        observer.setOptions($options);
     });
     const result = readable(observer.getCurrentResult(), (set) => {
         return observer.subscribe(notifyManager.batchCalls((val) => set(val)));

package/build/lib/createQueries.d.ts

@@ -1,6 +1,6 @@
 import type { QueryKey, QueryFunction, QueryClient, QueriesPlaceholderDataFunction, QueryObserverResult, RegisteredError } from '@tanstack/query-core';
 import { type Readable } from 'svelte/store';
-import type { CreateQueryOptions } from './types';
+import type { CreateQueryOptions, WritableOrVal } from './types';
 declare type CreateQueryOptionsForCreateQueries<TQueryFnData = unknown, TError = RegisteredError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey> = Omit<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'placeholderData'> & {
     placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction<TQueryFnData>;
 };
@@ -47,7 +47,7 @@ export declare type QueriesOptions<T extends any[], Result extends any[] = [], D
 export declare type QueriesResults<T extends any[], Result extends any[] = [], Depth extends ReadonlyArray<number> = []> = Depth['length'] extends MAXIMUM_DEPTH ? QueryObserverResult[] : T extends [] ? [] : T extends [infer Head] ? [...Result, GetResults<Head>] : T extends [infer Head, ...infer Tail] ? QueriesResults<[...Tail], [...Result, GetResults<Head>], [...Depth, 1]> : T extends CreateQueryOptionsForCreateQueries<infer TQueryFnData, infer TError, infer TData, any>[] ? QueryObserverResult<unknown extends TData ? TQueryFnData : TData, unknown extends TError ? RegisteredError : TError>[] : QueryObserverResult[];
 export declare type CreateQueriesResult<T extends any[]> = Readable<QueriesResults<T>>;
 export declare function createQueries<T extends any[]>({ queries, queryClient, }: {
-    queries: readonly [...QueriesOptions<T>];
+    queries: WritableOrVal<[...QueriesOptions<T>]>;
     queryClient?: QueryClient;
 }): CreateQueriesResult<T>;
 export {};

package/build/lib/createQueries.js

@@ -1,26 +1,26 @@
 import { notifyManager, QueriesObserver } from '@tanstack/query-core';
-import { readable } from 'svelte/store';
+import { derived, get, readable, writable } from 'svelte/store';
 import { useQueryClient } from './useQueryClient';
+import { isWritable } from './utils';
 export function createQueries({ queries, queryClient, }) {
     const client = useQueryClient(queryClient);
     // const isRestoring = useIsRestoring()
-    function getDefaultQuery(newQueries) {
-        return newQueries.map((options) => {
+    const queriesStore = isWritable(queries) ? queries : writable(queries);
+    const defaultedQueriesStore = derived(queriesStore, ($queries) => {
+        return $queries.map((options) => {
             const defaultedOptions = client.defaultQueryOptions(options);
             // Make sure the results are already in fetching state before subscribing or updating options
             defaultedOptions._optimisticResults = 'optimistic';
             return defaultedOptions;
         });
-    }
-    const defaultedQueries = getDefaultQuery(queries);
-    let observer = new QueriesObserver(client, defaultedQueries);
-    readable(observer).subscribe(($observer) => {
-        observer = $observer;
+    });
+    const observer = new QueriesObserver(client, get(defaultedQueriesStore));
+    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, { listeners: false });
+        observer.setQueries($defaultedQueries, { listeners: false });
     });
-    const { subscribe } = readable(observer.getOptimisticResult(defaultedQueries), (set) => {
+    const { subscribe } = readable(observer.getOptimisticResult(get(defaultedQueriesStore)), (set) => {
         return observer.subscribe(notifyManager.batchCalls(set));
     });
     return { subscribe };

package/build/lib/createQuery.d.ts

@@ -1,11 +1,11 @@
 import type { QueryKey, QueryClient, RegisteredError } from '@tanstack/query-core';
-import type { DefinedCreateQueryResult, CreateQueryOptions, CreateQueryResult } from './types';
+import type { DefinedCreateQueryResult, CreateQueryOptions, CreateQueryResult, WritableOrVal } from './types';
 declare type UndefinedInitialDataOptions<TQueryFnData = unknown, TError = RegisteredError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey> = CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
     initialData?: undefined;
 };
 declare type DefinedInitialDataOptions<TQueryFnData = unknown, TError = RegisteredError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey> = CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {
     initialData: TQueryFnData | (() => TQueryFnData);
 };
-export declare function createQuery<TQueryFnData = unknown, TError = RegisteredError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): CreateQueryResult<TData, TError>;
-export declare function createQuery<TQueryFnData = unknown, TError = RegisteredError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): DefinedCreateQueryResult<TData, TError>;
+export declare function createQuery<TQueryFnData = unknown, TError = RegisteredError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: WritableOrVal<UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>>, queryClient?: QueryClient): CreateQueryResult<TData, TError>;
+export declare function createQuery<TQueryFnData = unknown, TError = RegisteredError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: WritableOrVal<DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>>, queryClient?: QueryClient): DefinedCreateQueryResult<TData, TError>;
 export {};

package/build/lib/types.d.ts

@@ -1,6 +1,7 @@
 import type { InfiniteQueryObserverOptions, InfiniteQueryObserverResult, MutationObserverResult, QueryObserverOptions, QueryObserverResult, QueryKey, MutationObserverOptions, MutateFunction, DefinedQueryObserverResult, RegisteredError } from '@tanstack/query-core';
 import type { QueryClient } from '@tanstack/query-core';
-import type { Readable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
+export declare type WritableOrVal<T> = T | Writable<T>;
 export interface ContextOptions {
     /**
      * Use this to pass your Svelte Query context. Otherwise, `defaultContext` will be used.

package/build/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import type { Writable } from 'svelte/store';
+import type { WritableOrVal } from './types';
+export declare function isWritable<T extends object>(obj: WritableOrVal<T>): obj is Writable<T>;

package/build/lib/utils.js

@@ -0,0 +1,3 @@
+export function isWritable(obj) {
+    return 'subscribe' in obj && 'set' in obj && 'update' in obj;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-query",
-  "version": "5.0.0-alpha.0",
+  "version": "5.0.0-alpha.1",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Svelte",
   "author": "Dre Johnson",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "vitest": "^0.27.1"
   },
   "dependencies": {
-    "@tanstack/query-core": "5.0.0-alpha.0"
+    "@tanstack/query-core": "5.0.0-alpha.1"
   },
   "peerDependencies": {
     "svelte": "^3.54.0"

package/src/__tests__/CreateQueries.svelte

@@ -3,7 +3,7 @@
   import { setQueryClientContext } from '../context'
   import type { QueriesOptions } from '../createQueries'
 
-  export let options: { queries: readonly [...QueriesOptions<any>] }
+  export let options: { queries: [...QueriesOptions<any>] }
 
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)

package/src/__tests__/CreateQuery.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
-  import { createQuery, QueryClient, type CreateQueryOptions } from '../index'
+  import {
+    createQuery,
+    QueryClient,
+    type CreateQueryOptions,
+    type WritableOrVal,
+  } from '../index'
   import { setQueryClientContext } from '../context'
 
-  export let options: CreateQueryOptions<any>
+  export let options: WritableOrVal<CreateQueryOptions<any>>
 
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
@@ -17,3 +22,9 @@
 {:else if $query.isSuccess}
   <p>Success</p>
 {/if}
+
+<ul>
+  {#each $query.data ?? [] as entry}
+    <li>id: {entry.id}</li>
+  {/each}
+</ul>

package/src/__tests__/createQuery.test.ts

@@ -1,7 +1,9 @@
 import { describe, it, expect } from 'vitest'
 import { render, waitFor } from '@testing-library/svelte'
+import { writable } from 'svelte/store'
 import CreateQuery from './CreateQuery.svelte'
 import { sleep } from './utils'
+import type { CreateQueryOptions, WritableOrVal } from '../types'
 
 describe('createQuery', () => {
   it('Render and wait for success', async () => {
@@ -25,4 +27,38 @@ describe('createQuery', () => {
       expect(rendered.getByText('Success')).toBeInTheDocument()
     })
   })
+
+  it('should keep previous data when returned as placeholder data', async () => {
+    const options: WritableOrVal<CreateQueryOptions> = writable({
+      queryKey: ['test', [1]],
+      queryFn: async ({ queryKey }) => {
+        await sleep(50)
+        const ids = queryKey[1]
+        if (!ids || !Array.isArray(ids)) return []
+        return ids.map((id) => ({ id }))
+      },
+      placeholderData: (previousData: { id: number }[]) => previousData,
+    })
+    const rendered = render(CreateQuery, { props: { options } })
+
+    expect(rendered.queryByText('id: 1')).not.toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).not.toBeInTheDocument()
+
+    await sleep(100)
+
+    expect(rendered.queryByText('id: 1')).toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).not.toBeInTheDocument()
+
+    options.update((o) => ({ ...o, queryKey: ['test', [1, 2]] }))
+
+    await sleep(0)
+
+    expect(rendered.queryByText('id: 1')).toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).not.toBeInTheDocument()
+
+    await sleep(100)
+
+    expect(rendered.queryByText('id: 1')).toBeInTheDocument()
+    expect(rendered.queryByText('id: 2')).toBeInTheDocument()
+  })
 })

package/src/createBaseQuery.ts

@@ -1,8 +1,13 @@
 import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'
-import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types'
+import type {
+  CreateBaseQueryOptions,
+  CreateBaseQueryResult,
+  WritableOrVal,
+} from './types'
 import { useQueryClient } from './useQueryClient'
-import { derived, readable } from 'svelte/store'
+import { derived, get, readable, writable } from 'svelte/store'
+import { isWritable } from './utils'
 
 export function createBaseQuery<
   TQueryFnData,
@@ -11,52 +16,54 @@ export function createBaseQuery<
   TQueryData,
   TQueryKey extends QueryKey,
 >(
-  options: CreateBaseQueryOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryData,
-    TQueryKey
+  options: WritableOrVal<
+    CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
   >,
   Observer: typeof QueryObserver,
   queryClient?: QueryClient,
 ): CreateBaseQueryResult<TData, TError> {
   const client = useQueryClient(queryClient)
-  const defaultedOptions = client.defaultQueryOptions(options)
-  defaultedOptions._optimisticResults = 'optimistic'
 
-  let observer = new Observer<
+  const optionsStore = isWritable(options) ? options : writable(options)
+
+  const defaultedOptionsStore = derived(optionsStore, ($options) => {
+    const defaultedOptions = client.defaultQueryOptions($options)
+    defaultedOptions._optimisticResults = 'optimistic'
+
+    // Include callbacks in batch renders
+    if (defaultedOptions.onError) {
+      defaultedOptions.onError = notifyManager.batchCalls(
+        defaultedOptions.onError,
+      )
+    }
+
+    if (defaultedOptions.onSuccess) {
+      defaultedOptions.onSuccess = notifyManager.batchCalls(
+        defaultedOptions.onSuccess,
+      )
+    }
+
+    if (defaultedOptions.onSettled) {
+      defaultedOptions.onSettled = notifyManager.batchCalls(
+        defaultedOptions.onSettled,
+      )
+    }
+
+    return defaultedOptions
+  })
+
+  const observer = new Observer<
     TQueryFnData,
     TError,
     TData,
     TQueryData,
     TQueryKey
-  >(client, defaultedOptions)
-
-  // Include callbacks in batch renders
-  if (defaultedOptions.onError) {
-    defaultedOptions.onError = notifyManager.batchCalls(
-      defaultedOptions.onError,
-    )
-  }
-
-  if (defaultedOptions.onSuccess) {
-    defaultedOptions.onSuccess = notifyManager.batchCalls(
-      defaultedOptions.onSuccess,
-    )
-  }
-
-  if (defaultedOptions.onSettled) {
-    defaultedOptions.onSettled = notifyManager.batchCalls(
-      defaultedOptions.onSettled,
-    )
-  }
+  >(client, get(defaultedOptionsStore))
 
-  readable(observer).subscribe(($observer) => {
-    observer = $observer
+  defaultedOptionsStore.subscribe(($defaultedOptions) => {
     // Do not notify on updates because of changes in the options because
     // these changes should already be reflected in the optimistic result.
-    observer.setOptions(defaultedOptions, { listeners: false })
+    observer.setOptions($defaultedOptions, { listeners: false })
   })
 
   const result = readable(observer.getCurrentResult(), (set) => {
@@ -64,8 +71,8 @@ export function createBaseQuery<
   })
 
   const { subscribe } = derived(result, ($result) => {
-    $result = observer.getOptimisticResult(defaultedOptions)
-    return !defaultedOptions.notifyOnChangeProps
+    $result = observer.getOptimisticResult(get(defaultedOptionsStore))
+    return !get(defaultedOptionsStore).notifyOnChangeProps
       ? observer.trackResult($result)
       : $result
   })

package/src/createInfiniteQuery.ts

@@ -9,6 +9,7 @@ import { InfiniteQueryObserver } from '@tanstack/query-core'
 import type {
   CreateInfiniteQueryOptions,
   CreateInfiniteQueryResult,
+  WritableOrVal,
 } from './types'
 import { createBaseQuery } from './createBaseQuery'
 
@@ -19,18 +20,21 @@ export function createInfiniteQuery<
   TQueryKey extends QueryKey = QueryKey,
   TPageParam = unknown,
 >(
-  options: CreateInfiniteQueryOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryFnData,
-    TQueryKey,
-    TPageParam
+  options: WritableOrVal<
+    CreateInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryFnData,
+      TQueryKey,
+      TPageParam
+    >
   >,
   queryClient?: QueryClient,
 ): CreateInfiniteQueryResult<TData, TError> {
   return createBaseQuery(
     options,
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     InfiniteQueryObserver as typeof QueryObserver,
     queryClient,
   ) as CreateInfiniteQueryResult<TData, TError>

package/src/createMutation.ts

@@ -1,12 +1,14 @@
-import { readable, derived } from 'svelte/store'
+import { readable, derived, writable, get } from 'svelte/store'
 import type { QueryClient, RegisteredError } from '@tanstack/query-core'
 import { MutationObserver, notifyManager } from '@tanstack/query-core'
 import type {
   CreateMutateFunction,
   CreateMutationOptions,
   CreateMutationResult,
+  WritableOrVal,
 } from './types'
 import { useQueryClient } from './useQueryClient'
+import { isWritable } from './utils'
 
 export function createMutation<
   TData = unknown,
@@ -14,22 +16,26 @@ export function createMutation<
   TVariables = void,
   TContext = unknown,
 >(
-  options: CreateMutationOptions<TData, TError, TVariables, TContext>,
+  options: WritableOrVal<
+    CreateMutationOptions<TData, TError, TVariables, TContext>
+  >,
   queryClient?: QueryClient,
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
   const client = useQueryClient(queryClient)
-  let observer = new MutationObserver<TData, TError, TVariables, TContext>(
+
+  const optionsStore = isWritable(options) ? options : writable(options)
+
+  const observer = new MutationObserver<TData, TError, TVariables, TContext>(
     client,
-    options,
+    get(optionsStore),
   )
   let mutate: CreateMutateFunction<TData, TError, TVariables, TContext>
 
-  readable(observer).subscribe(($observer) => {
-    observer = $observer
+  optionsStore.subscribe(($options) => {
     mutate = (variables, mutateOptions) => {
       observer.mutate(variables, mutateOptions).catch(noop)
     }
-    observer.setOptions(options)
+    observer.setOptions($options)
   })
 
   const result = readable(observer.getCurrentResult(), (set) => {

package/src/createQueries.ts

@@ -8,10 +8,11 @@ import type {
 } from '@tanstack/query-core'
 
 import { notifyManager, QueriesObserver } from '@tanstack/query-core'
-import { readable, type Readable } from 'svelte/store'
+import { derived, get, readable, writable, type Readable } from 'svelte/store'
 
-import type { CreateQueryOptions } from './types'
+import type { CreateQueryOptions, WritableOrVal } from './types'
 import { useQueryClient } from './useQueryClient'
+import { isWritable } from './utils'
 
 // This defines the `CreateQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`.
 // `placeholderData` function does not have a parameter
@@ -155,34 +156,33 @@ export function createQueries<T extends any[]>({
   queries,
   queryClient,
 }: {
-  queries: readonly [...QueriesOptions<T>]
+  queries: WritableOrVal<[...QueriesOptions<T>]>
   queryClient?: QueryClient
 }): CreateQueriesResult<T> {
   const client = useQueryClient(queryClient)
   // const isRestoring = useIsRestoring()
 
-  function getDefaultQuery(newQueries: readonly [...QueriesOptions<T>]) {
-    return newQueries.map((options) => {
+  const queriesStore = isWritable(queries) ? queries : writable(queries)
+
+  const defaultedQueriesStore = derived(queriesStore, ($queries) => {
+    return $queries.map((options) => {
       const defaultedOptions = client.defaultQueryOptions(options)
       // Make sure the results are already in fetching state before subscribing or updating options
       defaultedOptions._optimisticResults = 'optimistic'
 
       return defaultedOptions
     })
-  }
-
-  const defaultedQueries = getDefaultQuery(queries)
-  let observer = new QueriesObserver(client, defaultedQueries)
+  })
+  const observer = new QueriesObserver(client, get(defaultedQueriesStore))
 
-  readable(observer).subscribe(($observer) => {
-    observer = $observer
+  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, { listeners: false })
+    observer.setQueries($defaultedQueries, { listeners: false })
   })
 
   const { subscribe } = readable(
-    observer.getOptimisticResult(defaultedQueries) as any,
+    observer.getOptimisticResult(get(defaultedQueriesStore)) as any,
     (set) => {
       return observer.subscribe(notifyManager.batchCalls(set))
     },

package/src/createQuery.ts

@@ -9,6 +9,7 @@ import type {
   DefinedCreateQueryResult,
   CreateQueryOptions,
   CreateQueryResult,
+  WritableOrVal,
 } from './types'
 
 type UndefinedInitialDataOptions<
@@ -35,7 +36,9 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options: WritableOrVal<
+    UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+  >,
   queryClient?: QueryClient,
 ): CreateQueryResult<TData, TError>
 
@@ -45,7 +48,9 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options: WritableOrVal<
+    DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>
+  >,
   queryClient?: QueryClient,
 ): DefinedCreateQueryResult<TData, TError>
 
@@ -55,7 +60,9 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options: WritableOrVal<
+    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+  >,
   queryClient?: QueryClient,
 ) {
   return createBaseQuery(options, QueryObserver, queryClient)

package/src/types.ts

@@ -11,7 +11,9 @@ import type {
   RegisteredError,
 } from '@tanstack/query-core'
 import type { QueryClient } from '@tanstack/query-core'
-import type { Readable } from 'svelte/store'
+import type { Readable, Writable } from 'svelte/store'
+
+export type WritableOrVal<T> = T | Writable<T>
 
 export interface ContextOptions {
   /**

package/src/utils.ts

@@ -0,0 +1,8 @@
+import type { Writable } from 'svelte/store'
+import type { WritableOrVal } from './types'
+
+export function isWritable<T extends object>(
+  obj: WritableOrVal<T>,
+): obj is Writable<T> {
+  return 'subscribe' in obj && 'set' in obj && 'update' in obj
+}