@tanstack/solid-query 5.51.5 → 5.51.6

package/build/dev.cjs

@@ -143,7 +143,11 @@ function createBaseQuery(options, Observer, queryClient) {
     const obs = observer();
     return obs.subscribe((result) => {
       observerResult = result;
-      queueMicrotask(() => refetch());
+      queueMicrotask(() => {
+        if (unsubscribe) {
+          refetch();
+        }
+      });
     });
   };
   function setStateWithReconciliation(res) {

package/build/dev.js

@@ -142,7 +142,11 @@ function createBaseQuery(options, Observer, queryClient) {
     const obs = observer();
     return obs.subscribe((result) => {
       observerResult = result;
-      queueMicrotask(() => refetch());
+      queueMicrotask(() => {
+        if (unsubscribe) {
+          refetch();
+        }
+      });
     });
   };
   function setStateWithReconciliation(res) {

package/build/index.cjs

@@ -134,7 +134,11 @@ function createBaseQuery(options, Observer, queryClient) {
     const obs = observer();
     return obs.subscribe((result) => {
       observerResult = result;
-      queueMicrotask(() => refetch());
+      queueMicrotask(() => {
+        if (unsubscribe) {
+          refetch();
+        }
+      });
     });
   };
   function setStateWithReconciliation(res) {

package/build/index.js

@@ -133,7 +133,11 @@ function createBaseQuery(options, Observer, queryClient) {
     const obs = observer();
     return obs.subscribe((result) => {
       observerResult = result;
-      queueMicrotask(() => refetch());
+      queueMicrotask(() => {
+        if (unsubscribe) {
+          refetch();
+        }
+      });
     });
   };
   function setStateWithReconciliation(res) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "5.51.5",
+  "version": "5.51.6",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",

package/src/__tests__/createQuery.test.tsx

@@ -3528,6 +3528,124 @@ describe('createQuery', () => {
     ])
   })
 
+  // See https://github.com/TanStack/query/issues/7711
+  it('race condition: should cleanup observers after component that created the query is unmounted #1', async () => {
+    const key = queryKey()
+
+    function Component() {
+      let val = 1
+      const dataQuery = createQuery(() => ({
+        queryKey: [key],
+        queryFn: () => {
+          return val++
+        },
+      }))
+
+      return (
+        <div>
+          <p>component</p>
+          <p>data: {String(dataQuery.data)}</p>
+        </div>
+      )
+    }
+
+    const Outer = () => {
+      const [showComp, setShowComp] = createSignal(true)
+      return (
+        <div>
+          <button
+            onClick={() => {
+              queryClient.invalidateQueries()
+              setShowComp(!showComp())
+            }}
+          >
+            toggle
+          </button>
+          {showComp() ? <Component /> : <div>not showing</div>}
+        </div>
+      )
+    }
+
+    const rendered = render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Outer />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() => rendered.getByText('component'))
+    fireEvent.click(rendered.getByText('toggle'))
+    await waitFor(() => rendered.getByText('not showing'))
+    fireEvent.click(rendered.getByText('toggle'))
+    await waitFor(() => rendered.getByText('component'))
+    fireEvent.click(rendered.getByText('toggle'))
+    await waitFor(() => rendered.getByText('not showing'))
+
+    const entry = queryClient.getQueryCache().find({
+      queryKey: [key],
+    })!
+
+    expect(entry.getObserversCount()).toBe(0)
+  })
+
+  // See https://github.com/TanStack/query/issues/7711
+  it('race condition: should cleanup observers after component that created the query is unmounted #2', async () => {
+    const key = queryKey()
+
+    function Component() {
+      let val = 1
+      const dataQuery = createQuery(() => ({
+        queryKey: [key],
+        queryFn: () => {
+          return val++
+        },
+      }))
+
+      return (
+        <div>
+          <p>component</p>
+          <p>data: {String(dataQuery.data)}</p>
+        </div>
+      )
+    }
+
+    const Outer = () => {
+      const [showComp, setShowComp] = createSignal(true)
+      return (
+        <div>
+          <button
+            onClick={() => {
+              queueMicrotask(() => setShowComp(!showComp()))
+              queryClient.invalidateQueries()
+            }}
+          >
+            toggle
+          </button>
+          {showComp() ? <Component /> : <div>not showing</div>}
+        </div>
+      )
+    }
+
+    const rendered = render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Outer />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() => rendered.getByText('component'))
+    fireEvent.click(rendered.getByText('toggle'))
+    await waitFor(() => rendered.getByText('not showing'))
+    fireEvent.click(rendered.getByText('toggle'))
+    await waitFor(() => rendered.getByText('component'))
+    fireEvent.click(rendered.getByText('toggle'))
+    await waitFor(() => rendered.getByText('not showing'))
+
+    const entry = queryClient.getQueryCache().find({
+      queryKey: [key],
+    })!
+
+    expect(entry.getObserversCount()).toBe(0)
+  })
+
   it('should mark query as fetching, when using initialData', async () => {
     const key = queryKey()
     const results: Array<DefinedCreateQueryResult<string>> = []

package/src/createBaseQuery.ts

@@ -179,7 +179,11 @@ export function createBaseQuery<
     const obs = observer()
     return obs.subscribe((result) => {
       observerResult = result
-      queueMicrotask(() => refetch())
+      queueMicrotask(() => {
+        if (unsubscribe) {
+          refetch()
+        }
+      })
     })
   }