refactor(core): prevent early access to signal from query context (#…

…5851)
refinedev · Apr 24, 2024 · 8d2dd43 · 8d2dd43
1 parent 7c22b8e
commit 8d2dd43
Show file tree

Hide file tree

Showing 16 changed files with 77 additions and 116 deletions.
diff --git a/.changeset/eleven-kangaroos-hope.md b/.changeset/eleven-kangaroos-hope.md
@@ -0,0 +1,9 @@
+---
+"@refinedev/core": patch
+---
+
+refactor: prevented early accessing `signal` from `useQuery` of `@tanstack/react-query`
+
+In query hooks, `signal` was accessed directly by destructuring which was causing issues in development mode with duplicated requests. This change accesses `queryContext` instead of destructured `signal` properly to prevent `@tanstack/react-query` from setting `abortSignalConsumed` flag unexpectedly.
+
+Resolves [#5843](https://github.com/refinedev/refine/issues/5843)
diff --git a/examples/data-provider-strapi-v4/cypress/e2e/all.cy.ts b/examples/data-provider-strapi-v4/cypress/e2e/all.cy.ts
@@ -89,16 +89,14 @@ describe("data-provider-strapi-v4", () => {
     });
 
     it("should list with pagination", () => {
-      cy.wait("@strapiV4GetPosts");
-      cy.getAntdLoadingOverlay().should("not.exist");
-
       cy.wait("@strapiV4GetPosts").then(({ request }) => {
         const query = request.query;
         expect(query.pagination).to.deep.equal({
           page: "1",
           pageSize: "10",
         });
       });
+      cy.getAntdLoadingOverlay().should("not.exist");
 
       cy.get(".ant-pagination-item-2 > a").click();
       cy.wait("@strapiV4GetPosts").then(({ request }) => {
@@ -111,13 +109,11 @@ describe("data-provider-strapi-v4", () => {
     });
 
     it("should sort", () => {
-      cy.wait("@strapiV4GetPosts");
-      cy.getAntdLoadingOverlay().should("not.exist");
-
       cy.wait("@strapiV4GetPosts").then(({ request }) => {
         const query = request.query;
         expect(query.sort).to.eq("id:desc");
       });
+      cy.getAntdLoadingOverlay().should("not.exist");
 
       cy.getAntdColumnSorter(0).click();
       cy.wait("@strapiV4GetPosts").then(({ request }) => {
@@ -135,7 +131,6 @@ describe("data-provider-strapi-v4", () => {
     it("should filter", () => {
       cy.wait("@strapiV4GetCategories");
       cy.wait("@strapiV4GetPosts");
-      cy.wait("@strapiV4GetPosts");
       cy.getAntdLoadingOverlay().should("not.exist");
 
       cy.getAntdFilterTrigger(0).click();
@@ -298,7 +293,6 @@ describe("data-provider-strapi-v4", () => {
     });
 
     it("should change locale", () => {
-      cy.wait("@strapiV4GetPosts");
       cy.get("#locale").contains("Deutsch").click();
       cy.wait("@strapiV4GetPosts").then(({ request }) => {
         const query = request.query;

diff --git a/examples/data-provider-supabase/cypress/e2e/all.cy.ts b/examples/data-provider-supabase/cypress/e2e/all.cy.ts
@@ -95,7 +95,6 @@ describe("data-provider-supabase", () => {
       cy.getAntdLoadingOverlay().should("not.exist");
 
       cy.get(".ant-pagination-item-2 > a").click();
-      cy.wait("@supabaseGetPosts");
       cy.wait("@supabaseGetPosts").then(({ request }) => {
         const query = request.query;
         expect(query).to.deep.equal({
@@ -108,9 +107,6 @@ describe("data-provider-supabase", () => {
     });
 
     it("should sort", () => {
-      cy.wait("@supabaseGetPosts");
-      cy.getAntdLoadingOverlay().should("not.exist");
-
       cy.wait("@supabaseGetPosts").then(({ request }) => {
         const query = request.query;
         expect(query).to.deep.equal({
@@ -120,6 +116,7 @@ describe("data-provider-supabase", () => {
           order: "id.asc",
         });
       });
+      cy.getAntdLoadingOverlay().should("not.exist");
 
       cy.getAntdColumnSorter(0).click();
       cy.wait("@supabaseGetPosts").then(({ request }) => {
@@ -158,7 +155,6 @@ describe("data-provider-supabase", () => {
           .click();
         cy.contains(/filter/i).click({ force: true });
 
-        cy.wait("@supabaseGetPosts");
         cy.wait("@supabaseGetPosts").then(({ request }) => {
           const query = request.query;
           expect(query).to.deep.equal({
@@ -181,7 +177,6 @@ describe("data-provider-supabase", () => {
 
     it("should show", () => {
       cy.wait("@supabaseGetPosts");
-      cy.wait("@supabaseGetPosts");
 
       cy.getShowButton().first().click();
       cy.location("pathname").should("contains", "/blog-posts/show/");

diff --git a/examples/form-antd-mutation-mode/cypress/e2e/all.cy.ts b/examples/form-antd-mutation-mode/cypress/e2e/all.cy.ts
@@ -75,7 +75,6 @@ describe("form-antd-mutation-mode", () => {
     cy.getEditButton().first().should("not.be.disabled");
     cy.getEditButton().first().click();
     // wait loading state and render to be finished
-    cy.wait("@getPost");
     waitForEditPageLoading();
 
     fillForm();

diff --git a/examples/inferencer-mantine/cypress/e2e/all.cy.ts b/examples/inferencer-mantine/cypress/e2e/all.cy.ts
@@ -277,6 +277,7 @@ describe("inferencer-mantine", () => {
   });
 
   it("should work with pagination", () => {
+    cy.wait("@getBlogPosts");
     cy.wait("@getBlogPosts");
     cy.wait("@getBlogPosts");
     cy.wait("@getCategories");
@@ -285,8 +286,6 @@ describe("inferencer-mantine", () => {
     cy.get(".mantine-Pagination-item").contains("2").click();
     cy.url().should("include", "current=2");
     cy.getMantineLoadingOverlay().should("not.exist");
-    cy.wait("@getBlogPosts");
-    cy.wait("@getBlogPosts");
     cy.wait("@getBlogPosts").then((interception) => {
       const { request } = interception;
       const { _start, _end } = request.query;

diff --git a/examples/table-antd-table-filter/cypress/e2e/all.cy.ts b/examples/table-antd-table-filter/cypress/e2e/all.cy.ts
@@ -8,7 +8,6 @@ describe("table-antd-table-filter", () => {
     cy.interceptGETCategories();
     cy.visit("http://localhost:5173");
     cy.wait("@getPosts");
-    cy.wait("@getPosts");
     cy.wait("@getCategories");
   });
 

diff --git a/examples/table-chakra-ui-basic/cypress/e2e/all.cy.ts b/examples/table-chakra-ui-basic/cypress/e2e/all.cy.ts
@@ -41,9 +41,8 @@ describe("table-chakra-ui-basic", () => {
 
     cy.wait("@getPosts").then((interception) => {
       const { request } = interception;
-      const { _sort } = request.query;
 
-      expect(_sort).to.contains("id");
+      expect(request.query).not.to.ownProperty("_sort");
     });
 
     cy.intercept(

diff --git a/examples/table-mantine-basic/cypress/e2e/all.cy.ts b/examples/table-mantine-basic/cypress/e2e/all.cy.ts
@@ -60,9 +60,8 @@ describe("table-mantine-basic", () => {
 
     cy.wait("@getPosts").then((interception) => {
       const { request } = interception;
-      const { _sort } = request.query;
 
-      expect(_sort).not.to.contains("id");
+      expect(request.query).not.to.ownProperty("_sort");
     });
   });
 
@@ -94,8 +93,6 @@ describe("table-mantine-basic", () => {
   });
 
   it("should work with pagination", () => {
-    cy.wait("@getPosts");
-
     cy.get(".mantine-Pagination-item").contains("2").click();
 
     cy.url().should("include", "current=2");

diff --git a/examples/table-material-ui-table-filter/cypress/e2e/all.cy.ts b/examples/table-material-ui-table-filter/cypress/e2e/all.cy.ts
@@ -14,7 +14,6 @@ describe("table-material-ui-table-filter", () => {
   });
 
   it("the table should be filterable by form", () => {
-    cy.wait("@getPosts");
     cy.wait("@getPosts");
     cy.getMaterialUILoadingCircular().should("not.exist");
 

diff --git a/packages/core/src/definitions/helpers/index.ts b/packages/core/src/definitions/helpers/index.ts
@@ -33,3 +33,4 @@ export { propertyPathToArray } from "./property-path-to-array";
 export { downloadInBrowser } from "./downloadInBrowser";
 export { deferExecution } from "./defer-execution";
 export { asyncDebounce } from "./async-debounce";
+export { prepareQueryContext } from "./prepare-query-context";
diff --git a/packages/core/src/definitions/helpers/prepare-query-context/index.ts b/packages/core/src/definitions/helpers/prepare-query-context/index.ts
@@ -0,0 +1,20 @@
+import type { QueryFunctionContext, QueryKey } from "@tanstack/react-query";
+
+export const prepareQueryContext = (
+  context: QueryFunctionContext<QueryKey, any>,
+): Omit<QueryFunctionContext<QueryKey, any>, "meta"> => {
+  const queryContext = {
+    queryKey: context.queryKey,
+    pageParam: context.pageParam,
+  };
+
+  Object.defineProperty(queryContext, "signal", {
+    enumerable: true,
+    get: () => {
+      console.log("with getter prepare");
+      return context.signal;
+    },
+  });
+
+  return queryContext;
+};
diff --git a/packages/core/src/hooks/data/useCustom.ts b/packages/core/src/hooks/data/useCustom.ts
@@ -5,7 +5,11 @@ import {
   useQuery,
 } from "@tanstack/react-query";
 
-import { pickNotDeprecated, useActiveAuthProvider } from "@definitions/helpers";
+import {
+  pickNotDeprecated,
+  useActiveAuthProvider,
+  prepareQueryContext,
+} from "@definitions/helpers";
 import {
   useDataProvider,
   useHandleNotification,
@@ -156,26 +160,18 @@ export const useCustom = <
           ...(preferredMeta || {}),
         })
         .get(preferLegacyKeys),
-      queryFn: ({ queryKey, pageParam, signal }) =>
+      queryFn: (context) =>
         custom<TQueryFnData>({
           url,
           method,
           ...config,
           meta: {
             ...combinedMeta,
-            queryContext: {
-              queryKey,
-              pageParam,
-              signal,
-            },
+            queryContext: prepareQueryContext(context),
           },
           metaData: {
             ...combinedMeta,
-            queryContext: {
-              queryKey,
-              pageParam,
-              signal,
-            },
+            queryContext: prepareQueryContext(context),
           },
         }),
       ...queryOptions,

diff --git a/packages/core/src/hooks/data/useInfiniteList.ts b/packages/core/src/hooks/data/useInfiniteList.ts
@@ -12,6 +12,7 @@ import {
   handlePaginationParams,
   pickDataProvider,
   pickNotDeprecated,
+  prepareQueryContext,
   useActiveAuthProvider,
 } from "@definitions/helpers";
 import {
@@ -250,10 +251,15 @@ export const useInfiniteList = <
         }),
       })
       .get(preferLegacyKeys),
-    queryFn: ({ queryKey, pageParam, signal }) => {
+    queryFn: (context) => {
       const paginationProperties = {
         ...prefferedPagination,
-        current: pageParam,
+        current: context.pageParam,
+      };
+
+      const meta = {
+        ...combinedMeta,
+        queryContext: prepareQueryContext(context),
       };
 
       return getList<TQueryFnData>({
@@ -263,22 +269,8 @@ export const useInfiniteList = <
         filters: prefferedFilters,
         sort: prefferedSorters,
         sorters: prefferedSorters,
-        meta: {
-          ...combinedMeta,
-          queryContext: {
-            queryKey,
-            pageParam,
-            signal,
-          },
-        },
-        metaData: {
-          ...combinedMeta,
-          queryContext: {
-            queryKey,
-            pageParam,
-            signal,
-          },
-        },
+        meta,
+        metaData: meta,
       }).then(({ data, total, ...rest }) => {
         return {
           data,

diff --git a/packages/core/src/hooks/data/useList.ts b/packages/core/src/hooks/data/useList.ts
@@ -9,6 +9,7 @@ import {
   handlePaginationParams,
   pickDataProvider,
   pickNotDeprecated,
+  prepareQueryContext,
   useActiveAuthProvider,
 } from "@definitions/helpers";
 import {
@@ -248,30 +249,20 @@ export const useList = <
         }),
       })
       .get(preferLegacyKeys),
-    queryFn: ({ queryKey, pageParam, signal }) => {
+    queryFn: (context) => {
+      const meta = {
+        ...combinedMeta,
+        queryContext: prepareQueryContext(context),
+      };
       return getList<TQueryFnData>({
         resource: resource?.name ?? "",
         pagination: prefferedPagination,
         hasPagination: isServerPagination,
         filters: prefferedFilters,
         sort: prefferedSorters,
         sorters: prefferedSorters,
-        meta: {
-          ...combinedMeta,
-          queryContext: {
-            queryKey,
-            pageParam,
-            signal,
-          },
-        },
-        metaData: {
-          ...combinedMeta,
-          queryContext: {
-            queryKey,
-            pageParam,
-            signal,
-          },
-        },
+        meta,
+        metaData: meta,
       });
     },
     ...queryOptions,