From 28c9291498b90219b4401aaaa54cc5a61d41a26e Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Tue, 28 Dec 2021 22:28:27 +0100
Subject: [PATCH 1/2] refactor: remove cancel method as it no longer exists

it wasn't doing anything in that test
---
 src/reactjs/tests/useQuery.test.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/reactjs/tests/useQuery.test.tsx b/src/reactjs/tests/useQuery.test.tsx
index 44d0ac4caf..c0803b4b97 100644
--- a/src/reactjs/tests/useQuery.test.tsx
+++ b/src/reactjs/tests/useQuery.test.tsx
@@ -4268,17 +4268,9 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    const queryFn = () => {
-      let cancelFn = jest.fn()
-
-      const promise = new Promise<string>((resolve, reject) => {
-        cancelFn = jest.fn(() => reject('Cancelled'))
-        sleep(50).then(() => resolve('OK'))
-      })
-
-      ;(promise as any).cancel = cancelFn
-
-      return promise
+    const queryFn = async () => {
+      await sleep(50)
+      return 'OK'
     }
 
     function Page() {

From d1adaa0758a772c0b3078e6eda09ea7fa0f43e05 Mon Sep 17 00:00:00 2001
From: Dominik Dorfmeister <office@dorfmeister.cc>
Date: Tue, 28 Dec 2021 22:33:18 +0100
Subject: [PATCH 2/2] refactor: remove cancel method as it no longer exists

use signal in playground example instead of cancel fn
---
 examples/playground/src/index.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/examples/playground/src/index.js b/examples/playground/src/index.js
index 475e1ca0c7..886d24c182 100644
--- a/examples/playground/src/index.js
+++ b/examples/playground/src/index.js
@@ -181,7 +181,7 @@ function Todos({ initialFilter = "", setEditingIndex }) {
 
   const { status, data, isFetching, error, failureCount, refetch } = useQuery(
     ["todos", { filter }],
-    () => fetchTodos({ filter })
+    fetchTodos
   );
 
   return (
@@ -370,9 +370,16 @@ function AddTodo() {
   );
 }
 
-function fetchTodos({ filter } = {}) {
+function fetchTodos({ signal, queryKey: [, { filter }] }) {
   console.info("fetchTodos", { filter });
-  const promise = new Promise((resolve, reject) => {
+
+  if (signal) {
+    signal.addEventListener("abort", () => {
+      console.info("cancelled", filter);
+    });
+  }
+
+  return new Promise((resolve, reject) => {
     setTimeout(() => {
       if (Math.random() < errorRate) {
         return reject(
@@ -382,10 +389,6 @@ function fetchTodos({ filter } = {}) {
       resolve(list.filter((d) => d.name.includes(filter)));
     }, queryTimeMin + Math.random() * (queryTimeMax - queryTimeMin));
   });
-
-  promise.cancel = () => console.info("cancelled", filter);
-
-  return promise;
 }
 
 function fetchTodoById({ id }) {