Merge pull request #195 from jason89521/feat/staleTime

Author: jason89521

packages/daxus/src/__tests__/useAccessor-revalidateIfStale.test.tsx

@@ -1,9 +1,72 @@
-import { waitFor } from '@testing-library/react';
+import { act, fireEvent, renderHook, waitFor } from '@testing-library/react';
 import { useAccessor } from '../index.js';
-import { createControl, createPost, createPostModel, renderWithOptionsProvider } from './utils.js';
+import {
+  createControl,
+  createPost,
+  createPostModel,
+  renderWithOptionsProvider,
+  sleep,
+} from './utils.js';
+import { useState } from 'react';
 
 describe('useAccessor-normal revalidateIfStale', () => {
-  test('should revalidate if the data is marked as stale', async () => {
+  test('should revalidate if the accessor is stale', async () => {
+    const fetchDataMock = vi.fn();
+    const control = createControl({ fetchDataMock });
+    const { getPostById, postAdapter } = createPostModel(control);
+    function Page() {
+      const [id, setId] = useState(0);
+      const { data } = useAccessor(getPostById(id), postAdapter.tryReadOneFactory(id), {
+        revalidateIfStale: true,
+      });
+
+      return (
+        <div>
+          <button onClick={() => setId(id ? 0 : 1)}>change id</button>
+          {data?.title}
+        </div>
+      );
+    }
+
+    const { getByText, findByText } = renderWithOptionsProvider(<Page />);
+    await findByText('title0');
+    fireEvent.click(getByText('change id'));
+    await findByText('title1');
+    expect(fetchDataMock).toHaveBeenCalledTimes(2);
+    fireEvent.click(getByText('change id'));
+    getByText('title0');
+    await waitFor(() => {
+      expect(fetchDataMock).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  test('should mark accessor as stale after staleTime', async () => {
+    const control = createControl({});
+    const { getPostById, postAdapter } = createPostModel(control);
+    const { result } = renderHook(() =>
+      useAccessor(getPostById(0), postAdapter.tryReadOneFactory(0), { staleTime: 100 })
+    );
+
+    expect(result.current.accessor.isStale()).toBe(false);
+    await sleep(50);
+    expect(result.current.accessor.isStale()).toBe(false);
+    await waitFor(() => {
+      expect(result.current.accessor.isStale()).toBe(true);
+    });
+
+    await act(() => result.current.accessor.revalidate());
+    expect(result.current.accessor.isStale()).toBe(false);
+    await sleep(50);
+    // refetch the data. This action should postpone the stale state being set to true.
+    await act(() => result.current.accessor.revalidate());
+    await sleep(60);
+    expect(result.current.accessor.isStale()).toBe(false);
+    await waitFor(() => {
+      expect(result.current.accessor.isStale()).toBe(true);
+    });
+  });
+
+  test('should revalidate if the accessor is invalidated, and it is mounted', async () => {
     const fetchDataMock = vi.fn();
     const control = createControl({ fetchDataMock });
     const { getPostById, postAdapter, postModel } = createPostModel(control);

packages/daxus/src/constants.ts

@@ -14,4 +14,5 @@ export const defaultOptions: RequiredAccessorOptions<any> = {
   keepPreviousData: false,
   placeholderData: undefined,
   pollingWhenHidden: false,
+  staleTime: 0,
 };

packages/daxus/src/hooks/types.ts

@@ -56,6 +56,7 @@ export interface AccessorOptions<S = any> {
   keepPreviousData?: boolean;
   placeholderData?: S;
   pollingWhenHidden?: boolean;
+  staleTime?: number;
 }
 
 export interface AutoAccessorOptions<D, S = any> extends AccessorOptions<S> {

packages/daxus/src/hooks/useAccessor.ts

@@ -146,7 +146,8 @@ export function useAccessor<S, D, SS, E = unknown>(
       () => memoizedSnapshot,
     ] as const;
     // We assume the `getSnapshot` is depending on `accessor` so we don't put it in the dependencies array.
-  }, [accessor, stateDeps, serverStateKey]);
+    // ServerStateKey doesn't matter when we are in the client side.
+  }, [accessor, stateDeps]);
 
   const data = useSyncExternalStore(subscribeData, getData, getData);
   const hasData = !isUndefined(data) ? checkHasData(data) : false;
@@ -155,7 +156,7 @@ export function useAccessor<S, D, SS, E = unknown>(
     // Always revalidate when this hook is mounted.
     if (revalidateOnMount) return true;
     // If the accessor is stale, then we should revalidate.
-    if (revalidateIfStale && accessor?.getIsStale()) return true;
+    if (revalidateIfStale && accessor?.isStale()) return true;
     // If there is no data, we should fetch the data.
     if (!hasData) return true;
     // This condition is useful when `pollingInterval` changes.

packages/daxus/src/model/Accessor.ts

@@ -25,6 +25,8 @@ export class Accessor<S, Arg = any, Data = any, E = unknown> extends BaseAccesso
     onMount,
     onUnmount,
     isAuto,
+    setStaleTime,
+    getIsStale,
   }: NormalConstructorArgs<S, Arg, Data, E>) {
     super({
       getState,
@@ -35,6 +37,8 @@ export class Accessor<S, Arg = any, Data = any, E = unknown> extends BaseAccesso
       creatorName: action.name,
       notifyModel,
       isAuto,
+      setStaleTime,
+      getIsStale,
     });
     this.action = action;
     this.arg = arg;

packages/daxus/src/model/BaseAccessor.ts

@@ -43,12 +43,12 @@ export abstract class BaseAccessor<S, Arg, D, E> {
   private removeOnReconnectListener: (() => void) | null = null;
   private removeOnVisibilityChangeListener: (() => void) | null = null;
   private pollingTimeoutId: number | undefined;
-  private isStale = false;
   private onMount: () => void;
   private onUnmount: () => void;
   private autoListeners: (() => void)[] = [];
   private removeAllListeners: (() => void) | null = null;
   private isAuto: boolean;
+  private setStaleTime: (staleTime: number) => void;
 
   /**
    * Return the result of the revalidation.
@@ -61,6 +61,7 @@ export abstract class BaseAccessor<S, Arg, D, E> {
    * Get the state of the corresponding model.
    */
   getState: (serverStateKey?: object) => S;
+  isStale: () => boolean;
 
   /**
    * @internal
@@ -74,10 +75,9 @@ export abstract class BaseAccessor<S, Arg, D, E> {
     arg,
     isAuto,
     creatorName,
-  }: Pick<
-    BaseConstructorArgs<S, Arg>,
-    'getState' | 'modelSubscribe' | 'onMount' | 'onUnmount' | 'arg' | 'notifyModel' | 'isAuto'
-  > & { creatorName: string }) {
+    setStaleTime,
+    getIsStale,
+  }: Omit<BaseConstructorArgs<S, Arg>, 'updateState'> & { creatorName: string }) {
     this.getState = getState;
     this.modelSubscribe = modelSubscribe;
     this.onMount = onMount;
@@ -86,6 +86,8 @@ export abstract class BaseAccessor<S, Arg, D, E> {
     this.arg = arg;
     this.isAuto = isAuto;
     this.creatorName = creatorName;
+    this.isStale = getIsStale;
+    this.setStaleTime = setStaleTime;
   }
 
   getIsAuto = () => {
@@ -153,17 +155,8 @@ export abstract class BaseAccessor<S, Arg, D, E> {
     return this.status;
   };
 
-  /**
-   * Get whether this accessor is stale or not.
-   *
-   * @internal
-   */
-  getIsStale = () => {
-    return this.isStale;
-  };
-
   invalidate = () => {
-    this.isStale = true;
+    this.setStaleTime(0);
     if (this.isMounted()) {
       this.revalidate();
     }
@@ -272,12 +265,12 @@ export abstract class BaseAccessor<S, Arg, D, E> {
     error,
     data,
   }: OnFetchingFinishContext<D, E>): FetchPromiseResult<E, D> => {
-    const { pollingInterval } = this.getOptions();
+    const { pollingInterval, staleTime } = this.getOptions();
     if (pollingInterval > 0) {
       this.pollingTimeoutId = window.setTimeout(this.invokePollingRevalidation, pollingInterval);
     }
 
-    this.isStale = true;
+    this.setStaleTime(staleTime);
     if (error) {
       this.action.onError?.({ error, arg: this.arg });
       this.updateStatus({ isFetching: false, error });

packages/daxus/src/model/InfiniteAccessor.ts

@@ -37,6 +37,8 @@ export class InfiniteAccessor<S, Arg = any, Data = any, E = unknown> extends Bas
     onUnmount,
     initialPageNum,
     isAuto,
+    setStaleTime,
+    getIsStale,
   }: InfiniteConstructorArgs<S, Arg, Data, E>) {
     super({
       getState,
@@ -47,6 +49,8 @@ export class InfiniteAccessor<S, Arg = any, Data = any, E = unknown> extends Bas
       creatorName: action.name,
       notifyModel,
       isAuto,
+      setStaleTime,
+      getIsStale,
     });
     this.action = action;
     this.updateState = updateState;

packages/daxus/src/model/Model.ts

@@ -104,6 +104,10 @@ export function createModel<S extends object>(
     NormalAccessorCreator<S, any, any, any> | InfiniteAccessorCreator<S, any, any, any>
   >;
 
+  // Since accessors may be deleted from cache, we need to save the stale time in the model.
+  const staleTimeoutIdRecord = {} as Record<string, number>;
+  const isStaleRecord = {} as Record<string, boolean>;
+
   function assertDuplicateName(name: string) {
     if (objectKeys(creatorRecord).includes(name)) {
       throw new Error(`The creator name: ${name} has already existed!`);
@@ -199,6 +203,22 @@ export function createModel<S extends object>(
         onMount,
         onUnmount,
         isAuto: action.isAuto ?? false,
+        setStaleTime(staleTime) {
+          const timeoutId = staleTimeoutIdRecord[key];
+          clearTimeout(timeoutId);
+          // reset the stale state
+          isStaleRecord[key] = false;
+          if (staleTime === 0) {
+            isStaleRecord[key] = true;
+          } else if (staleTime > 0) {
+            staleTimeoutIdRecord[key] = window.setTimeout(() => {
+              isStaleRecord[key] = true;
+            }, staleTime);
+          }
+        },
+        getIsStale() {
+          return isStaleRecord[key] ?? false;
+        },
       };
 
       if (isServer()) {
@@ -274,6 +294,22 @@ export function createModel<S extends object>(
         onUnmount,
         initialPageNum: infiniteAccessorPageNumRecord[key] ?? 1,
         isAuto: action.isAuto ?? false,
+        setStaleTime(staleTime) {
+          const timeoutId = staleTimeoutIdRecord[key];
+          clearTimeout(timeoutId);
+          // reset the stale state
+          isStaleRecord[key] = false;
+          if (staleTime === 0) {
+            isStaleRecord[key] = true;
+          } else if (staleTime > 0) {
+            staleTimeoutIdRecord[key] = window.setTimeout(() => {
+              isStaleRecord[key] = true;
+            }, staleTime);
+          }
+        },
+        getIsStale() {
+          return isStaleRecord[key] ?? false;
+        },
       };
 
       if (isServer()) {

packages/daxus/src/model/types.ts

@@ -48,6 +48,8 @@ export interface BaseConstructorArgs<S, Arg> {
   notifyModel: () => void;
   onMount: () => void;
   onUnmount: () => void;
+  setStaleTime: (staleTime: number) => void;
+  getIsStale: () => boolean;
   isAuto: boolean;
 }