make query options a writable store

Author: chrislcs

packages/svelte-query/src/__tests__/CreateQuery.svelte

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

packages/svelte-query/src/__tests__/createQuery.test.ts

@@ -1,16 +1,20 @@
 import { describe, it, expect } from 'vitest'
 import { render, screen } 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 () => {
     render(CreateQuery, {
       props: {
-        queryKey: ['test'],
-        queryFn: async () => {
-          await sleep(100)
-          return 'Success'
+        options: {
+          queryKey: ['test'],
+          queryFn: async () => {
+            await sleep(100)
+            return 'Success'
+          },
         },
       },
     })
@@ -25,4 +29,38 @@ describe('createQuery', () => {
     expect(screen.queryByText('Loading')).not.toBeInTheDocument()
     expect(screen.queryByText('Error')).not.toBeInTheDocument()
   })
+
+  it('should keep previous data with keepPreviousData option set to true', async () => {
+    const options: WritableOrVal<CreateQueryOptions> = writable({
+      queryKey: ['test', [1]],
+      queryFn: async ({ queryKey }) => {
+        await sleep(100)
+        const ids = queryKey[1]
+        if (!ids || !Array.isArray(ids)) return []
+        return ids.map((id) => ({ id }))
+      },
+      keepPreviousData: true,
+    })
+    render(CreateQuery, { props: { options } })
+
+    expect(screen.queryByText('id: 1')).not.toBeInTheDocument()
+    expect(screen.queryByText('id: 2')).not.toBeInTheDocument()
+
+    await sleep(200)
+
+    expect(screen.queryByText('id: 1')).toBeInTheDocument()
+    expect(screen.queryByText('id: 2')).not.toBeInTheDocument()
+
+    options.update((o) => ({ ...o, queryKey: ['test', [1, 2]] }))
+
+    await sleep(0)
+
+    expect(screen.queryByText('id: 1')).toBeInTheDocument()
+    expect(screen.queryByText('id: 2')).not.toBeInTheDocument()
+
+    await sleep(200)
+
+    expect(screen.queryByText('id: 1')).toBeInTheDocument()
+    expect(screen.queryByText('id: 2')).toBeInTheDocument()
+  })
 })

packages/svelte-query/src/createBaseQuery.ts

@@ -3,9 +3,19 @@ import {
   type QueryKey,
   type QueryObserver,
 } from '@tanstack/query-core'
-import type { CreateBaseQueryOptions, CreateBaseQueryResult } from './types'
+import { derived, readable, writable, get, type Writable } from 'svelte/store'
+import type {
+  CreateBaseQueryOptions,
+  CreateBaseQueryResult,
+  WritableOrVal,
+} from './types'
 import { useQueryClient } from './useQueryClient'
-import { derived, readable } from 'svelte/store'
+
+function isWritable<T extends object>(
+  obj: WritableOrVal<T>,
+): obj is Writable<T> {
+  return 'subscribe' in obj
+}
 
 export function createBaseQuery<
   TQueryFnData,
@@ -14,60 +24,69 @@ 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,
 ): CreateBaseQueryResult<TData, TError> {
   const queryClient = useQueryClient()
-  const defaultedOptions = queryClient.defaultQueryOptions(options)
-  defaultedOptions._optimisticResults = 'optimistic'
 
-  let observer = new Observer<
+  let optionsStore: Writable<
+    CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
+  >
+  if (isWritable(options)) {
+    optionsStore = options
+  } else {
+    optionsStore = writable(options)
+  }
+
+  const defaultedOptionsStore = derived(optionsStore, ($options) => {
+    const defaultedOptions = queryClient.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
-  >(queryClient, 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,
-    )
-  }
+  >(queryClient, 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) => {
     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
   })

packages/svelte-query/src/createQuery.ts

@@ -5,6 +5,7 @@ import type {
   DefinedCreateQueryResult,
   CreateQueryOptions,
   CreateQueryResult,
+  WritableOrVal,
 } from './types'
 
 export function createQuery<
@@ -14,7 +15,7 @@ export function createQuery<
   TQueryKey extends QueryKey = QueryKey,
 >(
   options: Omit<
-    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    WritableOrVal<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>>,
     'initialData'
   > & {
     initialData?: () => undefined
@@ -28,7 +29,7 @@ export function createQuery<
   TQueryKey extends QueryKey = QueryKey,
 >(
   options: Omit<
-    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    WritableOrVal<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>>,
     'initialData'
   > & {
     initialData: TQueryFnData | (() => TQueryFnData)
@@ -41,7 +42,9 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options: WritableOrVal<
+    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+  >,
 ): CreateQueryResult<TData, TError>
 
 export function createQuery<
@@ -52,7 +55,7 @@ export function createQuery<
 >(
   queryKey: TQueryKey,
   options?: Omit<
-    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    WritableOrVal<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>>,
     'queryKey' | 'initialData'
   > & { initialData?: () => undefined },
 ): CreateQueryResult<TData, TError>
@@ -65,7 +68,7 @@ export function createQuery<
 >(
   queryKey: TQueryKey,
   options?: Omit<
-    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    WritableOrVal<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>>,
     'queryKey' | 'initialData'
   > & { initialData: TQueryFnData | (() => TQueryFnData) },
 ): DefinedCreateQueryResult<TData, TError>
@@ -78,7 +81,7 @@ export function createQuery<
 >(
   queryKey: TQueryKey,
   options?: Omit<
-    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    WritableOrVal<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>>,
     'queryKey'
   >,
 ): CreateQueryResult<TData, TError>
@@ -92,7 +95,7 @@ export function createQuery<
   queryKey: TQueryKey,
   queryFn: QueryFunction<TQueryFnData, TQueryKey>,
   options?: Omit<
-    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    WritableOrVal<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>>,
     'queryKey' | 'queryFn' | 'initialData'
   > & { initialData?: () => undefined },
 ): CreateQueryResult<TData, TError>
@@ -106,7 +109,7 @@ export function createQuery<
   queryKey: TQueryKey,
   queryFn: QueryFunction<TQueryFnData, TQueryKey>,
   options?: Omit<
-    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    WritableOrVal<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>>,
     'queryKey' | 'queryFn' | 'initialData'
   > & { initialData: TQueryFnData | (() => TQueryFnData) },
 ): DefinedCreateQueryResult<TData, TError>
@@ -120,7 +123,7 @@ export function createQuery<
   queryKey: TQueryKey,
   queryFn: QueryFunction<TQueryFnData, TQueryKey>,
   options?: Omit<
-    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    WritableOrVal<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>>,
     'queryKey' | 'queryFn'
   >,
 ): CreateQueryResult<TData, TError>
@@ -131,13 +134,25 @@ export function createQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  arg1: TQueryKey | CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  arg1:
+    | TQueryKey
+    | WritableOrVal<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>>,
   arg2?:
     | QueryFunction<TQueryFnData, TQueryKey>
-    | CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
-  arg3?: CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    | WritableOrVal<CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>>,
+  arg3?: WritableOrVal<
+    CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+  >,
 ): CreateQueryResult<TData, TError> {
-  const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
+  const parsedOptions = parseQueryArgs(
+    arg1 as
+      | TQueryKey
+      | CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    arg2 as
+      | QueryFunction<TQueryFnData, TQueryKey>
+      | CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    arg3 as CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  )
   const result = createBaseQuery(parsedOptions, QueryObserver)
   return result
 }

packages/svelte-query/src/types.ts

@@ -10,7 +10,9 @@ import type {
   DefinedQueryObserverResult,
 } 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 {
   /**