From 33ffa6c190e4771e48d2451a9fbb386050271bcd Mon Sep 17 00:00:00 2001
From: Chris Lucas <chris.lucas@geodan.nl>
Date: Fri, 17 Feb 2023 18:43:19 +0100
Subject: [PATCH 1/4] use store to handle reactivity in query options

---
 .../src/__tests__/CreateQueries.svelte        |  2 +-
 .../src/__tests__/CreateQuery.svelte          | 10 ++-
 .../src/__tests__/createQuery.test.ts         | 36 +++++++++
 packages/svelte-query/src/createBaseQuery.ts  | 79 ++++++++++---------
 .../svelte-query/src/createInfiniteQuery.ts   | 15 ++--
 packages/svelte-query/src/createMutation.ts   | 20 +++--
 packages/svelte-query/src/createQueries.ts    | 26 +++---
 packages/svelte-query/src/createQuery.ts      | 13 ++-
 packages/svelte-query/src/types.ts            |  4 +-
 packages/svelte-query/src/utils.ts            |  8 ++
 packages/svelte-query/tsconfig.json           |  2 +-
 11 files changed, 145 insertions(+), 70 deletions(-)
 create mode 100644 packages/svelte-query/src/utils.ts

diff --git a/packages/svelte-query/src/__tests__/CreateQueries.svelte b/packages/svelte-query/src/__tests__/CreateQueries.svelte
index d8908f2b50d..8b28d811810 100644
--- a/packages/svelte-query/src/__tests__/CreateQueries.svelte
+++ b/packages/svelte-query/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)
diff --git a/packages/svelte-query/src/__tests__/CreateQuery.svelte b/packages/svelte-query/src/__tests__/CreateQuery.svelte
index 76378b740b4..466be739b24 100644
--- a/packages/svelte-query/src/__tests__/CreateQuery.svelte
+++ b/packages/svelte-query/src/__tests__/CreateQuery.svelte
@@ -1,8 +1,8 @@
 <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 +17,9 @@
 {:else if $query.isSuccess}
   <p>Success</p>
 {/if}
+
+<ul>
+  {#each $query.data ?? [] as entry}
+    <li>id: {entry.id}</li>
+  {/each}
+</ul>
diff --git a/packages/svelte-query/src/__tests__/createQuery.test.ts b/packages/svelte-query/src/__tests__/createQuery.test.ts
index ce438d61353..77b4c508be6 100644
--- a/packages/svelte-query/src/__tests__/createQuery.test.ts
+++ b/packages/svelte-query/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()
+  })
 })
diff --git a/packages/svelte-query/src/createBaseQuery.ts b/packages/svelte-query/src/createBaseQuery.ts
index 9aa81df71f9..64f1d9d1fd1 100644
--- a/packages/svelte-query/src/createBaseQuery.ts
+++ b/packages/svelte-query/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
   })
diff --git a/packages/svelte-query/src/createInfiniteQuery.ts b/packages/svelte-query/src/createInfiniteQuery.ts
index e78e5d9fe7a..8b0240c1c3d 100644
--- a/packages/svelte-query/src/createInfiniteQuery.ts
+++ b/packages/svelte-query/src/createInfiniteQuery.ts
@@ -8,6 +8,7 @@ import { InfiniteQueryObserver } from '@tanstack/query-core'
 import type {
   CreateInfiniteQueryOptions,
   CreateInfiniteQueryResult,
+  WritableOrVal,
 } from './types'
 import { createBaseQuery } from './createBaseQuery'
 
@@ -17,12 +18,14 @@ export function createInfiniteQuery<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
 >(
-  options: CreateInfiniteQueryOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryFnData,
-    TQueryKey
+  options: WritableOrVal<
+    CreateInfiniteQueryOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryFnData,
+      TQueryKey
+    >
   >,
   queryClient?: QueryClient,
 ): CreateInfiniteQueryResult<TData, TError> {
diff --git a/packages/svelte-query/src/createMutation.ts b/packages/svelte-query/src/createMutation.ts
index 736f5afa0b9..14762e288e1 100644
--- a/packages/svelte-query/src/createMutation.ts
+++ b/packages/svelte-query/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) => {
diff --git a/packages/svelte-query/src/createQueries.ts b/packages/svelte-query/src/createQueries.ts
index da168538e97..777851be11d 100644
--- a/packages/svelte-query/src/createQueries.ts
+++ b/packages/svelte-query/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))
     },
diff --git a/packages/svelte-query/src/createQuery.ts b/packages/svelte-query/src/createQuery.ts
index f491e77f118..6f3f9fb42f1 100644
--- a/packages/svelte-query/src/createQuery.ts
+++ b/packages/svelte-query/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)
diff --git a/packages/svelte-query/src/types.ts b/packages/svelte-query/src/types.ts
index af81a5268a7..8dd9ceed643 100644
--- a/packages/svelte-query/src/types.ts
+++ b/packages/svelte-query/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 {
   /**
diff --git a/packages/svelte-query/src/utils.ts b/packages/svelte-query/src/utils.ts
new file mode 100644
index 00000000000..8711a2e4d20
--- /dev/null
+++ b/packages/svelte-query/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
+}
diff --git a/packages/svelte-query/tsconfig.json b/packages/svelte-query/tsconfig.json
index d7bfd5a72fe..fdaea3ed133 100644
--- a/packages/svelte-query/tsconfig.json
+++ b/packages/svelte-query/tsconfig.json
@@ -28,7 +28,7 @@
     "target": "esnext",
     "tsBuildInfoFile": "./build/.tsbuildinfo"
   },
-  "include": ["src"],
+  "include": ["src", "src/**/*.svelte"],
   "references": [
     { "path": "../query-core" }
   ]

From 2f0520fc61a8c21e3fdb76d097b967b633fad86f Mon Sep 17 00:00:00 2001
From: Chris Lucas <chris.lucas@geodan.nl>
Date: Fri, 17 Feb 2023 18:43:29 +0100
Subject: [PATCH 2/4] update docs

---
 docs/svelte/overview.md   |  2 +-
 docs/svelte/reactivity.md | 21 ++++++++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/docs/svelte/overview.md b/docs/svelte/overview.md
index 14fb67c81a6..03d840dae6a 100644
--- a/docs/svelte/overview.md
+++ b/docs/svelte/overview.md
@@ -71,4 +71,4 @@ Svelte Query offers useful functions and components that will make managing serv
 Svelte Query offers an API similar to React Query, but there are some key differences to be mindful of.
 
 - Many of the functions in Svelte Query return a Svelte store. To access values on these stores reactively, you need to prefix the store with a `$`. You can learn more about Svelte stores [here](https://svelte.dev/tutorial/writable-stores).
-- If your query or mutation depends on variables, you must assign it reactively. You can read more about this [here](./reactivity).
+- If your query or mutation depends on variables, you must use a store for the options. You can read more about this [here](./reactivity).
diff --git a/docs/svelte/reactivity.md b/docs/svelte/reactivity.md
index 6c7f8875e45..6d7b3fdc334 100644
--- a/docs/svelte/reactivity.md
+++ b/docs/svelte/reactivity.md
@@ -3,12 +3,12 @@ id: reactivity
 title: Reactivity
 ---
 
-Svelte uses a compiler to build your code which optimises rendering. By default, variables will run once, unless they are referenced in your markup. To make a different variable or function reactive, you need to use [reactive declarations](https://svelte.dev/tutorial/reactive-declarations). This also applies to Svelte Query.
+Svelte uses a compiler to build your code which optimises rendering. By default, variables will run once, unless they are referenced in your markup. To be able to react to changes in options you need to use [stores](https://svelte.dev/tutorial/writable-stores).
 
 In the below example, the `refetchInterval` option is set from the variable `intervalMs`, which is edited by the input field. However, as the query is not told it should react to changes in `intervalMs`, `refetchInterval` will not change when the input value changes.
 
 ```markdown
-<script lang="ts">
+<script>
   import { createQuery } from '@tanstack/svelte-query'
 
   let intervalMs = 1000
@@ -25,22 +25,25 @@ In the below example, the `refetchInterval` option is set from the variable `int
 <input bind:value={intervalMs} type="number" />
 ```
 
-To solve this, you can prefix the query with `$: ` to tell the compiler it should be reactive.
+To solve this, create a store for the options and use it as input for the query. Update the options store when the value changes and the query will react to the change.
 
 ```markdown
-<script lang="ts">
+<script>
   import { createQuery } from '@tanstack/svelte-query'
 
-  let intervalMs = 1000
-
   const endpoint = 'http://localhost:5173/api/data'
 
-  $: query = createQuery({
+  const queryOptions = writable({
     queryKey: ['refetch'],
     queryFn: async () => await fetch(endpoint).then((r) => r.json()),
-    refetchInterval: intervalMs,
+    refetchInterval: 1000,
   })
+  const query = createQuery(queryOptions)
+
+  function updateRefetchInterval(event) {
+    $queryOptions.refetchInterval = event.target.valueAsNumber
+  }
 </script>
 
-<input bind:value={intervalMs} type="number" />
+<input type="number" on:input={updateRefetchInterval} />
 ```

From d3dd0fedc878312790f7f9d641710493f8cb07d0 Mon Sep 17 00:00:00 2001
From: Chris Lucas <chris.lucas@geodan.nl>
Date: Mon, 27 Feb 2023 19:59:58 +0100
Subject: [PATCH 3/4] improve isWritable function

---
 packages/svelte-query/src/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte-query/src/utils.ts b/packages/svelte-query/src/utils.ts
index 8711a2e4d20..8ce19a7f433 100644
--- a/packages/svelte-query/src/utils.ts
+++ b/packages/svelte-query/src/utils.ts
@@ -4,5 +4,5 @@ import type { WritableOrVal } from './types'
 export function isWritable<T extends object>(
   obj: WritableOrVal<T>,
 ): obj is Writable<T> {
-  return 'subscribe' in obj
+  return 'subscribe' in obj && 'set' in obj && 'update' in obj
 }

From eef95347aa37e0a5dc324fbb7cbf0f9449dea1e4 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sat, 4 Mar 2023 08:55:00 +1100
Subject: [PATCH 4/4] Fix prettier

---
 packages/svelte-query/src/__tests__/CreateQuery.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/svelte-query/src/__tests__/CreateQuery.svelte b/packages/svelte-query/src/__tests__/CreateQuery.svelte
index 466be739b24..2f3ae51db2f 100644
--- a/packages/svelte-query/src/__tests__/CreateQuery.svelte
+++ b/packages/svelte-query/src/__tests__/CreateQuery.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { createQuery, QueryClient, type CreateQueryOptions, type WritableOrVal } from '../index'
+  import {
+    createQuery,
+    QueryClient,
+    type CreateQueryOptions,
+    type WritableOrVal,
+  } from '../index'
   import { setQueryClientContext } from '../context'
 
   export let options: WritableOrVal<CreateQueryOptions<any>>