From 4389b8b819ff4e078d5f247a60d11c6eddd3600e Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Thu, 6 Jul 2023 06:49:50 +1000
Subject: [PATCH 1/5] Set up demo for reactivity bug

---
 examples/react/basic/src/index.jsx            | 28 ++++++++++++++++++-
 .../svelte/basic/src/routes/+layout.svelte    |  1 +
 .../svelte/basic/src/routes/test/+page.svelte | 23 +++++++++++++++
 packages/svelte-query/src/createBaseQuery.ts  |  8 ++++--
 4 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 examples/svelte/basic/src/routes/test/+page.svelte

diff --git a/examples/react/basic/src/index.jsx b/examples/react/basic/src/index.jsx
index e038ea9b33..8ba7c484af 100644
--- a/examples/react/basic/src/index.jsx
+++ b/examples/react/basic/src/index.jsx
@@ -10,13 +10,22 @@ import {
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 60 * 1000,
+    },
+  },
+})
 
 function App() {
   const [postId, setPostId] = React.useState(-1)
 
   return (
     <QueryClientProvider client={queryClient}>
+
+<Test />
+
       <p>
         As you visit the posts below, you will notice them in a loading state
         the first time you load them. However, after you return to this list and
@@ -135,5 +144,22 @@ function Post({ postId, setPostId }) {
   )
 }
 
+function Test() {
+  const [id, setId] = React.useState(1)
+
+  const query = useQuery({
+    queryKey: ['myquery', id],
+    queryFn: async () => await fetch(`https://swapi.dev/api/people/${id}`).then((r) => r.json()),
+	});
+
+  return (
+    <>
+    <input onChange={(e) => setId(e.target.value)} value={id} />
+    {query.isPending ?  <p>Loading...</p> : query.isError ? <p>Error: {query.error.message}</p> : <pre>{JSON.stringify(query.data, null, 2)}</pre>}
+    </>
+  )
+  }
+
+
 const rootElement = document.getElementById('root')
 ReactDOM.createRoot(rootElement).render(<App />)
diff --git a/examples/svelte/basic/src/routes/+layout.svelte b/examples/svelte/basic/src/routes/+layout.svelte
index ef60a2f559..d0be66dc30 100644
--- a/examples/svelte/basic/src/routes/+layout.svelte
+++ b/examples/svelte/basic/src/routes/+layout.svelte
@@ -8,6 +8,7 @@
     defaultOptions: {
       queries: {
         enabled: browser,
+        staleTime: 60 * 1000,
       },
     },
   })
diff --git a/examples/svelte/basic/src/routes/test/+page.svelte b/examples/svelte/basic/src/routes/test/+page.svelte
new file mode 100644
index 0000000000..2ded701f90
--- /dev/null
+++ b/examples/svelte/basic/src/routes/test/+page.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { writable, derived } from "svelte/store";
+	import { createQuery } from "@tanstack/svelte-query";
+
+	const store = writable(1);
+
+	const queryOptions = derived(store, person => ({
+    queryKey: ['myquery', person],
+    queryFn: async () => await fetch(`https://swapi.dev/api/people/${person}`).then((r) => r.json()),
+	}))
+	
+  const query = createQuery(queryOptions);
+</script>
+
+<input type="number" bind:value={$store} />
+
+{#if $query.isPending}
+  <p>Loading...</p>
+{:else if $query.isError}
+  <p>Error: {$query.error.message}</p>
+{:else if $query.isSuccess}
+  <pre>{JSON.stringify($query.data, null, 2)}</pre>
+{/if}
diff --git a/packages/svelte-query/src/createBaseQuery.ts b/packages/svelte-query/src/createBaseQuery.ts
index a14322e32d..c80c7d5243 100644
--- a/packages/svelte-query/src/createBaseQuery.ts
+++ b/packages/svelte-query/src/createBaseQuery.ts
@@ -24,12 +24,14 @@ export function createBaseQuery<
 ): CreateBaseQueryResult<TData, TError> {
   const client = useQueryClient(queryClient)
 
+  // Converts options to a svelte store if not already a store.
   const optionsStore = isSvelteStore(options) ? options : readable(options)
 
-  const defaultedOptionsStore = derived(optionsStore, ($options) => {
-    const defaultedOptions = client.defaultQueryOptions($options)
+  // Creates a store that will always have the default options applied.
+  const defaultedOptionsStore = derived(optionsStore, ($optionsStore) => {
+    const defaultedOptions = client.defaultQueryOptions($optionsStore)
     defaultedOptions._optimisticResults = 'optimistic'
-
+    console.log("defaultedOptions", defaultedOptions)
     return defaultedOptions
   })
 

From add572e1e201aea43532dff4f4c3a98dbb9102f3 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Thu, 6 Jul 2023 07:04:00 +1000
Subject: [PATCH 2/5] Add derived log

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

diff --git a/packages/svelte-query/src/createBaseQuery.ts b/packages/svelte-query/src/createBaseQuery.ts
index c80c7d5243..d14fbab028 100644
--- a/packages/svelte-query/src/createBaseQuery.ts
+++ b/packages/svelte-query/src/createBaseQuery.ts
@@ -54,6 +54,7 @@ export function createBaseQuery<
   })
 
   const { subscribe } = derived(result, ($result) => {
+    console.log("derived", $result)
     $result = observer.getOptimisticResult(get(defaultedOptionsStore))
     return !get(defaultedOptionsStore).notifyOnChangeProps
       ? observer.trackResult($result)

From f6233332d36badda004bc4da64e87aa193d26ec4 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Thu, 6 Jul 2023 14:05:43 +0200
Subject: [PATCH 3/5] Fix by subscribing to defaultedOptionsStore

---
 packages/svelte-query/src/createBaseQuery.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/svelte-query/src/createBaseQuery.ts b/packages/svelte-query/src/createBaseQuery.ts
index d14fbab028..a9a5c225ee 100644
--- a/packages/svelte-query/src/createBaseQuery.ts
+++ b/packages/svelte-query/src/createBaseQuery.ts
@@ -22,19 +22,20 @@ export function createBaseQuery<
   Observer: typeof QueryObserver,
   queryClient?: QueryClient,
 ): CreateBaseQueryResult<TData, TError> {
+  /** Load query client */
   const client = useQueryClient(queryClient)
 
-  // Converts options to a svelte store if not already a store.
+  /** Converts options to a svelte store if not already a store object */
   const optionsStore = isSvelteStore(options) ? options : readable(options)
 
-  // Creates a store that will always have the default options applied.
+  /** Creates a store that has the default options applied */
   const defaultedOptionsStore = derived(optionsStore, ($optionsStore) => {
     const defaultedOptions = client.defaultQueryOptions($optionsStore)
     defaultedOptions._optimisticResults = 'optimistic'
-    console.log("defaultedOptions", defaultedOptions)
     return defaultedOptions
   })
 
+  /** Creates the observer */
   const observer = new Observer<
     TQueryFnData,
     TError,
@@ -53,10 +54,10 @@ export function createBaseQuery<
     return observer.subscribe(notifyManager.batchCalls(set))
   })
 
-  const { subscribe } = derived(result, ($result) => {
-    console.log("derived", $result)
-    $result = observer.getOptimisticResult(get(defaultedOptionsStore))
-    return !get(defaultedOptionsStore).notifyOnChangeProps
+  /** Subscribe to changes in result and defaultedOptionsStore */
+  const { subscribe } = derived([result, defaultedOptionsStore], ([$result, $defaultedOptionsStore]) => {
+    $result = observer.getOptimisticResult($defaultedOptionsStore)
+    return !$defaultedOptionsStore.notifyOnChangeProps
       ? observer.trackResult($result)
       : $result
   })

From 25497293be1ba57d0096286a1ad25ece405b5cac Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Thu, 6 Jul 2023 14:06:46 +0200
Subject: [PATCH 4/5] Run prettier

---
 examples/react/basic/src/index.jsx            | 21 ++++++++++++-------
 .../svelte/basic/src/routes/test/+page.svelte | 19 ++++++++++-------
 packages/svelte-query/src/createBaseQuery.ts  | 15 +++++++------
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/examples/react/basic/src/index.jsx b/examples/react/basic/src/index.jsx
index 8ba7c484af..128a667f86 100644
--- a/examples/react/basic/src/index.jsx
+++ b/examples/react/basic/src/index.jsx
@@ -23,8 +23,7 @@ function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
-
-<Test />
+      <Test />
 
       <p>
         As you visit the posts below, you will notice them in a loading state
@@ -149,17 +148,23 @@ function Test() {
 
   const query = useQuery({
     queryKey: ['myquery', id],
-    queryFn: async () => await fetch(`https://swapi.dev/api/people/${id}`).then((r) => r.json()),
-	});
+    queryFn: async () =>
+      await fetch(`https://swapi.dev/api/people/${id}`).then((r) => r.json()),
+  })
 
   return (
     <>
-    <input onChange={(e) => setId(e.target.value)} value={id} />
-    {query.isPending ?  <p>Loading...</p> : query.isError ? <p>Error: {query.error.message}</p> : <pre>{JSON.stringify(query.data, null, 2)}</pre>}
+      <input onChange={(e) => setId(e.target.value)} value={id} />
+      {query.isPending ? (
+        <p>Loading...</p>
+      ) : query.isError ? (
+        <p>Error: {query.error.message}</p>
+      ) : (
+        <pre>{JSON.stringify(query.data, null, 2)}</pre>
+      )}
     </>
   )
-  }
-
+}
 
 const rootElement = document.getElementById('root')
 ReactDOM.createRoot(rootElement).render(<App />)
diff --git a/examples/svelte/basic/src/routes/test/+page.svelte b/examples/svelte/basic/src/routes/test/+page.svelte
index 2ded701f90..d5c5d9075e 100644
--- a/examples/svelte/basic/src/routes/test/+page.svelte
+++ b/examples/svelte/basic/src/routes/test/+page.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
-	import { writable, derived } from "svelte/store";
-	import { createQuery } from "@tanstack/svelte-query";
+  import { writable, derived } from 'svelte/store'
+  import { createQuery } from '@tanstack/svelte-query'
 
-	const store = writable(1);
+  const store = writable(1)
 
-	const queryOptions = derived(store, person => ({
+  const queryOptions = derived(store, (person) => ({
     queryKey: ['myquery', person],
-    queryFn: async () => await fetch(`https://swapi.dev/api/people/${person}`).then((r) => r.json()),
-	}))
-	
-  const query = createQuery(queryOptions);
+    queryFn: async () =>
+      await fetch(`https://swapi.dev/api/people/${person}`).then((r) =>
+        r.json(),
+      ),
+  }))
+
+  const query = createQuery(queryOptions)
 </script>
 
 <input type="number" bind:value={$store} />
diff --git a/packages/svelte-query/src/createBaseQuery.ts b/packages/svelte-query/src/createBaseQuery.ts
index a9a5c225ee..374c727e19 100644
--- a/packages/svelte-query/src/createBaseQuery.ts
+++ b/packages/svelte-query/src/createBaseQuery.ts
@@ -55,12 +55,15 @@ export function createBaseQuery<
   })
 
   /** Subscribe to changes in result and defaultedOptionsStore */
-  const { subscribe } = derived([result, defaultedOptionsStore], ([$result, $defaultedOptionsStore]) => {
-    $result = observer.getOptimisticResult($defaultedOptionsStore)
-    return !$defaultedOptionsStore.notifyOnChangeProps
-      ? observer.trackResult($result)
-      : $result
-  })
+  const { subscribe } = derived(
+    [result, defaultedOptionsStore],
+    ([$result, $defaultedOptionsStore]) => {
+      $result = observer.getOptimisticResult($defaultedOptionsStore)
+      return !$defaultedOptionsStore.notifyOnChangeProps
+        ? observer.trackResult($result)
+        : $result
+    },
+  )
 
   return { subscribe }
 }

From 5fe13320b6a934a6fd4b620eef48a273dd071338 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Thu, 6 Jul 2023 14:14:34 +0200
Subject: [PATCH 5/5] Remove debugging changes

---
 examples/react/basic/src/index.jsx            | 33 +------------------
 .../svelte/basic/src/routes/+layout.svelte    |  1 -
 .../svelte/basic/src/routes/test/+page.svelte | 26 ---------------
 3 files changed, 1 insertion(+), 59 deletions(-)
 delete mode 100644 examples/svelte/basic/src/routes/test/+page.svelte

diff --git a/examples/react/basic/src/index.jsx b/examples/react/basic/src/index.jsx
index 128a667f86..e038ea9b33 100644
--- a/examples/react/basic/src/index.jsx
+++ b/examples/react/basic/src/index.jsx
@@ -10,21 +10,13 @@ import {
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 60 * 1000,
-    },
-  },
-})
+const queryClient = new QueryClient()
 
 function App() {
   const [postId, setPostId] = React.useState(-1)
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Test />
-
       <p>
         As you visit the posts below, you will notice them in a loading state
         the first time you load them. However, after you return to this list and
@@ -143,28 +135,5 @@ function Post({ postId, setPostId }) {
   )
 }
 
-function Test() {
-  const [id, setId] = React.useState(1)
-
-  const query = useQuery({
-    queryKey: ['myquery', id],
-    queryFn: async () =>
-      await fetch(`https://swapi.dev/api/people/${id}`).then((r) => r.json()),
-  })
-
-  return (
-    <>
-      <input onChange={(e) => setId(e.target.value)} value={id} />
-      {query.isPending ? (
-        <p>Loading...</p>
-      ) : query.isError ? (
-        <p>Error: {query.error.message}</p>
-      ) : (
-        <pre>{JSON.stringify(query.data, null, 2)}</pre>
-      )}
-    </>
-  )
-}
-
 const rootElement = document.getElementById('root')
 ReactDOM.createRoot(rootElement).render(<App />)
diff --git a/examples/svelte/basic/src/routes/+layout.svelte b/examples/svelte/basic/src/routes/+layout.svelte
index d0be66dc30..ef60a2f559 100644
--- a/examples/svelte/basic/src/routes/+layout.svelte
+++ b/examples/svelte/basic/src/routes/+layout.svelte
@@ -8,7 +8,6 @@
     defaultOptions: {
       queries: {
         enabled: browser,
-        staleTime: 60 * 1000,
       },
     },
   })
diff --git a/examples/svelte/basic/src/routes/test/+page.svelte b/examples/svelte/basic/src/routes/test/+page.svelte
deleted file mode 100644
index d5c5d9075e..0000000000
--- a/examples/svelte/basic/src/routes/test/+page.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-  import { writable, derived } from 'svelte/store'
-  import { createQuery } from '@tanstack/svelte-query'
-
-  const store = writable(1)
-
-  const queryOptions = derived(store, (person) => ({
-    queryKey: ['myquery', person],
-    queryFn: async () =>
-      await fetch(`https://swapi.dev/api/people/${person}`).then((r) =>
-        r.json(),
-      ),
-  }))
-
-  const query = createQuery(queryOptions)
-</script>
-
-<input type="number" bind:value={$store} />
-
-{#if $query.isPending}
-  <p>Loading...</p>
-{:else if $query.isError}
-  <p>Error: {$query.error.message}</p>
-{:else if $query.isSuccess}
-  <pre>{JSON.stringify($query.data, null, 2)}</pre>
-{/if}