fix: 🐛 Clear listeners for generic cache/queue hooks

Author: prc5

packages/react/__tests__/features/helpers/use-command-events/use-command-events.utils.spec.ts

@@ -0,0 +1,67 @@
+import { act } from "@testing-library/react";
+
+import { startServer, resetInterceptors, stopServer, createRequestInterceptor } from "../../../server";
+import { createRequest, renderUseRequestEvents } from "../../../utils";
+
+describe("useRequestEvents [ Utils ]", () => {
+  let request = createRequest();
+
+  beforeAll(() => {
+    startServer();
+  });
+
+  afterEach(() => {
+    resetInterceptors();
+  });
+
+  afterAll(() => {
+    stopServer();
+  });
+
+  beforeEach(() => {
+    jest.resetModules();
+    request = createRequest();
+  });
+
+  describe("When handling lifecycle events", () => {
+    it("should not throw when removing non existing event", async () => {
+      const response = renderUseRequestEvents(request);
+
+      expect(response.result.current[1].removeLifecycleListener).not.toThrow();
+    });
+    it("should unmount lifecycle events when handling requests by queue/cache keys", async () => {
+      const spy = jest.fn();
+      createRequestInterceptor(request);
+      const response = renderUseRequestEvents(request);
+
+      await act(async () => {
+        response.result.current[0].onRequestStart(spy);
+        response.result.current[1].addLifecycleListeners(request);
+        response.result.current[1].addLifecycleListeners(request);
+        response.result.current[1].addLifecycleListeners(request);
+
+        await request.send();
+      });
+
+      expect(spy).toBeCalledTimes(1);
+    });
+    it("should listen to every request id events", async () => {
+      const spy = jest.fn();
+      createRequestInterceptor(request);
+      const response = renderUseRequestEvents(request);
+
+      await act(async () => {
+        await request.send({
+          onSettle: (requestId) => {
+            response.result.current[0].onRequestStart(spy);
+            response.result.current[1].addLifecycleListeners(request, requestId);
+            response.result.current[1].addLifecycleListeners(request, requestId);
+            response.result.current[1].addLifecycleListeners(request, requestId);
+          },
+        });
+      });
+
+      expect(spy).toBeCalledTimes(3);
+    });
+  });
+});

packages/react/__tests__/features/helpers/use-request-events/use-request-events.utils.spec.ts

@@ -175,7 +175,14 @@ export const useRequestEvents = <T extends RequestInstance>({
   // ******************
 
   const addLifecycleListeners = (cmd: T, requestId?: string) => {
+    /**
+     * useFetch handles requesting by general keys
+     * This makes it possible to deduplicate requests from different places and share data
+     */
     if (!requestId) {
+      // It's important to clear previously attached listeners to not cause some additional response/request
+      // events to be triggered during lifecycle
+      clearLifecycleListeners();
       const { queueKey, cacheKey } = cmd;
       const requestStartUnmount = requestManager.events.onRequestStart(queueKey, handleRequestStart(cmd));
       const responseStartUnmount = requestManager.events.onResponseStart(queueKey, handleResponseStart(cmd));
@@ -195,6 +202,9 @@ export const useRequestEvents = <T extends RequestInstance>({
 
       return unmount;
     }
+    /**
+     * useSubmit handles requesting by requestIds, this makes it possible to track single requests
+     */
     const requestRemove = requestManager.events.onRemoveById(requestId, handleRemove);
     const requestStartUnmount = requestManager.events.onRequestStartById(requestId, handleRequestStart(cmd));
     const responseStartUnmount = requestManager.events.onResponseStartById(requestId, handleResponseStart(cmd));

packages/react/__tests__/features/helpers/use-tracked-state/use-tacked-state.actions.spec.ts renamed to packages/react/__tests__/features/helpers/use-tracked-state/use-tacked-state.actions.spec copy.ts

@@ -4,7 +4,7 @@ import { useDebounce, useThrottle } from "@better-hooks/performance";
 import { RequestInstance, Request, getRequestKey } from "@hyper-fetch/core";
 
 import { useRequestEvents, useTrackedState } from "helpers";
-import { UseFetchOptionsType, useFetchDefaultOptions, UseFetchReturnType, getRefreshTime } from "hooks/use-fetch";
+import { UseFetchOptionsType, useFetchDefaultOptions, UseFetchReturnType } from "hooks/use-fetch";
 import { useConfigProvider } from "config-provider";
 import { getBounceData } from "utils";
 import { InvalidationKeyType } from "types";
@@ -99,9 +99,6 @@ export const useFetch = <RequestType extends RequestInstance>(
 
   function handleRefresh() {
     if (!refresh) return;
-    const time = getRefreshTime(refreshTime, state.timestamp);
-
-    logger.debug(`Starting refresh counter, request will be send in ${time}ms`);
 
     refreshDebounce.debounce(() => {
       const isBlurred = !appManager.isFocused;
@@ -120,7 +117,7 @@ export const useFetch = <RequestType extends RequestInstance>(
 
       // Start new refresh counter
       handleRefresh();
-    }, time);
+    });
   }
 
   const handleRevalidation = (invalidateKey: InvalidationKeyType) => {