fix(clerk-js,shared): Increase time-to-stale for less frequent revali…

…dations (#2093)
clerk · Nov 10, 2023 · 492b8a7 · 492b8a7
1 parent 7f833da
commit 492b8a7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/.changeset/gentle-pants-matter.md b/.changeset/gentle-pants-matter.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+---
+
+Increase the duration until data become stale for organization hooks.
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
@@ -25,13 +25,8 @@ export const ActiveMembersList = () => {
     return null;
   }
 
-  const handleRoleChange = (membership: OrganizationMembershipResource) => (newRole: string) => {
-    return card
-      .runAsync(async () => {
-        return await membership.update({ role: newRole });
-      })
-      .catch(err => handleError(err, [], card.setError));
-  };
+  const handleRoleChange = (membership: OrganizationMembershipResource) => (newRole: string) =>
+    card.runAsync(() => membership.update({ role: newRole })).catch(err => handleError(err, [], card.setError));
 
   const handleRemove = (membership: OrganizationMembershipResource) => async () => {
     return card

diff --git a/packages/shared/src/react/hooks/usePagesOrInfinite.ts b/packages/shared/src/react/hooks/usePagesOrInfinite.ts
@@ -51,6 +51,11 @@ export const useWithSafeValues = <T extends PagesOrInfiniteOptions>(params: T |
   } as T;
 };
 
+const cachingSWROptions = {
+  dedupingInterval: 1000 * 60,
+  focusThrottleInterval: 1000 * 60 * 2,
+} satisfies Parameters<typeof useSWR>[2];
+
 type ArrayType<DataArray> = DataArray extends Array<infer ElementType> ? ElementType : never;
 type ExtractData<Type> = Type extends { data: infer Data } ? ArrayType<Data> : Type;
 
@@ -122,7 +127,7 @@ export const usePagesOrInfinite: UsePagesOrInfinite = (params, fetcher, options,
       // @ts-ignore
       return fetcher?.(requestParams);
     },
-    { keepPreviousData },
+    { keepPreviousData, ...cachingSWROptions },
   );
 
   const {
@@ -152,6 +157,7 @@ export const usePagesOrInfinite: UsePagesOrInfinite = (params, fetcher, options,
       // @ts-ignore
       return fetcher?.(requestParams);
     },
+    cachingSWROptions,
   );
 
   const page = useMemo(() => {