Merge pull request #68 from BetterTyped/fix/dynamic-revalidate

fix: 🐛 Refreshing and revalidation fixes

Author: prc5

packages/react/__tests__/features/use-fetch/use-fetch.refresh.spec.ts

@@ -82,4 +82,27 @@ describe("useFetch [ Refreshing ]", () => {
   it("should postpone refresh when dependencies change during countdown", async () => {
     // TODO
   });
+  it("should stop refreshing when value is changing from true to false", async () => {
+    const spy = jest.fn();
+    createRequestInterceptor(request);
+    const { result, rerender } = renderUseFetch(request, hookOptions);
+
+    act(() => {
+      result.current.onRequestStart(spy);
+    });
+
+    await waitForRender();
+    expect(spy).toBeCalledTimes(1);
+    await waitForRender(hookOptions.refreshTime * 1.5);
+
+    expect(spy).toBeCalledTimes(2);
+
+    act(() => {
+      rerender({ refresh: false });
+    });
+
+    await waitForRender(hookOptions.refreshTime * 1.5);
+
+    expect(spy).toBeCalledTimes(2);
+  });
 });

packages/react/__tests__/features/use-fetch/use-fetch.revalidate.spec.ts

@@ -180,4 +180,44 @@ describe("useFetch [ refetch ]", () => {
       await testSuccessState(mock, responseTwo);
     });
   });
+  it("should not refetch while toggling query", async () => {
+    const spy = jest.fn();
+
+    const revalidateRequest = createRequest({ endpoint: "123-revalidate" });
+    const revalidateMock = createRequestInterceptor(revalidateRequest, { fixture: { something: 123 } });
+
+    // First request
+    const response = renderUseFetch(request, { revalidate: false });
+
+    response.result.current.onFinished(() => {
+      spy();
+    });
+
+    await testSuccessState(mock, response);
+    expect(spy).toBeCalledTimes(1);
+
+    act(() => {
+      // Second request
+      response.rerender({ request: revalidateRequest, revalidate: false });
+    });
+
+    await testSuccessState(revalidateMock, response);
+    expect(spy).toBeCalledTimes(2);
+
+    // Check revalidation
+
+    act(() => {
+      // Third request
+      response.rerender({ request, revalidate: false });
+    });
+    await testSuccessState(mock, response);
+
+    act(() => {
+      // Fourth request
+      response.rerender({ request: revalidateRequest, revalidate: false });
+    });
+
+    await testSuccessState(revalidateMock, response);
+    expect(spy).toBeCalledTimes(2);
+  });
 });

packages/react/src/helpers/use-tracked-state/use-tracked-state.hooks.ts

@@ -47,8 +47,7 @@ export const useTrackedState = <T extends RequestInstance>({
 
   const getStaleStatus = (): boolean => {
     const cacheData = cache.get(cacheKey);
-
-    return isStaleCacheData(cacheTime, cacheData?.timestamp || state.current.timestamp);
+    return !cacheData || isStaleCacheData(cacheTime, cacheData?.timestamp);
   };
 
   // ******************
@@ -83,10 +82,14 @@ export const useTrackedState = <T extends RequestInstance>({
       const shouldLoadInitialCache = !hasState && !!state.current.data;
       const shouldRemovePreviousData = hasState && !state.current.data;
 
-      if (shouldLoadInitialCache || shouldRemovePreviousData) {
+      if (newState.data || shouldLoadInitialCache || shouldRemovePreviousData) {
         // Don't update the state when we are fetching data for new cacheKey
         // So on paginated page we will have previous page access until the new one will be fetched
+        // However: When we have some cached data, we can use it right away
         state.current = newState;
+        if (state.current) {
+          renderKeyTrigger(["data"]);
+        }
       }
     },
     [cacheKey, queueKey],

packages/react/src/hooks/use-fetch/use-fetch.hooks.ts

@@ -99,7 +99,10 @@ export const useFetch = <RequestType extends RequestInstance>(
   // ******************
 
   function handleRefresh() {
-    if (!refresh) return;
+    if (!refresh) {
+      refreshDebounce.reset();
+      return;
+    }
 
     refreshDebounce.debounce(() => {
       const isBlurred = !appManager.isFocused;
@@ -159,12 +162,13 @@ export const useFetch = <RequestType extends RequestInstance>(
   };
 
   const updateFetchData = () => {
+    const hasStaleData = getStaleStatus();
+    const shouldUpdate = !revalidate ? hasStaleData : true;
     /**
      * This is a hack to avoid double rendering in React 18
      * It renders initial mount event and allow us to consume only hook updates
      */
-
-    if (!ignoreReact18DoubleRender.current) {
+    if (!ignoreReact18DoubleRender.current && shouldUpdate) {
       /**
        * While debouncing we need to make sure that first request is not debounced when the cache is not available
        * This way it will not wait for debouncing but fetch data right away

packages/react/src/hooks/use-submit/use-submit.hooks.ts

@@ -40,7 +40,7 @@ export const useSubmit = <RequestType extends RequestInstance>(
       ...options,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(globalConfig.useSubmitConfig), JSON.stringify(options)],
+    [globalConfig.useSubmitConfig, JSON.stringify(options), options.deepCompare],
   );
   const { disabled, dependencyTracking, initialData, bounce, bounceType, bounceTime, deepCompare } = mergedOptions;