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 }) {
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() {