fix(shared): Replace mutate with setCache and revalidate

clerk · Oct 30, 2023 · c29d47e · c29d47e
1 parent 5f8f108
commit c29d47e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/packages/shared/src/react/hooks/useOrganization.tsx b/packages/shared/src/react/hooks/useOrganization.tsx
@@ -148,7 +148,8 @@ const undefinedPaginatedResource = {
   fetchPrevious: undefined,
   hasNextPage: false,
   hasPreviousPage: false,
-  mutate: undefined,
+  revalidate: undefined,
+  setCache: undefined,
 } as const;
 
 export const useOrganization: UseOrganization = params => {

diff --git a/packages/shared/src/react/hooks/useOrganizationList.tsx b/packages/shared/src/react/hooks/useOrganizationList.tsx
@@ -51,7 +51,8 @@ const undefinedPaginatedResource = {
   fetchPrevious: undefined,
   hasNextPage: false,
   hasPreviousPage: false,
-  mutate: undefined,
+  revalidate: undefined,
+  setCache: undefined,
 } as const;
 
 type UseOrganizationList = <T extends UseOrganizationListParams>(

diff --git a/packages/shared/src/react/hooks/usePagesOrInfinite.ts b/packages/shared/src/react/hooks/usePagesOrInfinite.ts
@@ -2,9 +2,8 @@
 
 import { useCallback, useMemo, useRef, useState } from 'react';
 
-import { useSWR, useSWRInfinite } from '../clerk-swr';
-import type { ValueOrSetter } from '../types';
-import type { PaginatedResources } from '../types';
+import { useSWR, useSWRInfinite } from './clerk-swr';
+import type { CacheSetter, PaginatedResources, ValueOrSetter } from './types';
 
 function getDifferentKeys(obj1: Record<string, unknown>, obj2: Record<string, unknown>): Record<string, unknown> {
   const keysSet = new Set(Object.keys(obj2));
@@ -207,7 +206,17 @@ export const usePagesOrInfinite: UsePagesOrInfinite = (params, fetcher, options,
   const hasNextPage = count - offsetCount * pageSizeRef.current > page * pageSizeRef.current;
   const hasPreviousPage = (page - 1) * pageSizeRef.current > offsetCount * pageSizeRef.current;
 
-  const mutate = triggerInfinite ? swrInfiniteMutate : swrMutate;
+  const setCache: CacheSetter = triggerInfinite
+    ? value =>
+        swrInfiniteMutate(value, {
+          revalidate: false,
+        })
+    : value =>
+        swrMutate(value, {
+          revalidate: false,
+        });
+
+  const revalidate = triggerInfinite ? () => swrInfiniteMutate() : () => swrMutate();
 
   return {
     data,
@@ -223,6 +232,8 @@ export const usePagesOrInfinite: UsePagesOrInfinite = (params, fetcher, options,
     hasNextPage,
     hasPreviousPage,
     // Let the hook return type define this type
-    mutate: mutate as any,
+    revalidate: revalidate as any,
+    // Let the hook return type define this type
+    setCache: setCache as any,
   };
 };
diff --git a/packages/shared/src/react/types.ts b/packages/shared/src/react/types.ts
@@ -1,6 +1,9 @@
-import type { KeyedMutator } from './clerk-swr';
-
 export type ValueOrSetter<T = unknown> = (size: T | ((_size: T) => T)) => void;
+
+export type CacheSetter<CData = any> = (
+  data?: CData | ((currentData?: CData) => Promise<undefined | CData> | undefined | CData),
+) => Promise<CData | undefined>;
+
 export type PaginatedResources<T = unknown, Infinite = false, ArrayOrPaginated = unknown> = {
   data: T[];
   count: number;
@@ -14,11 +17,12 @@ export type PaginatedResources<T = unknown, Infinite = false, ArrayOrPaginated =
   fetchNext: () => void;
   hasNextPage: boolean;
   hasPreviousPage: boolean;
-  mutate: Infinite extends true
+  revalidate: () => Promise<void>;
+  setCache: Infinite extends true
     ? // Array of pages of data
-      KeyedMutator<(ArrayOrPaginated | undefined)[]>
+      CacheSetter<(ArrayOrPaginated | undefined)[]>
     : // Array of data
-      KeyedMutator<ArrayOrPaginated | undefined>;
+      CacheSetter<ArrayOrPaginated | undefined>;
 };
 
 // Utility type to convert PaginatedDataAPI to properties as undefined, except booleans set to false