feat(shared): Organization hooks with setData and revalidate (#1745)

.changeset/blue-ghosts-float.md

@@ -0,0 +1,6 @@
+---
+'@clerk/shared': minor
+---
+
+Expose `revalidate` and `setData` for paginated lists of data in organization hooks.
+`const {userMemberships:{revalidate, setData}} = useOrganizationList({userMemberships:true})`

packages/clerk-js/src/ui/components/OrganizationList/UserInvitationList.tsx

@@ -5,7 +5,7 @@ import { useCoreClerk, useCoreOrganizationList } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { useCardState, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
-import { updateCacheInPlace } from '../OrganizationSwitcher/utils';
+import { populateCacheUpdateItem } from '../OrganizationSwitcher/utils';
 import { PreviewListItem, PreviewListItemButton } from './shared';
 import { MembershipPreview } from './UserMembershipList';
 import { organizationListParams } from './utils';
@@ -39,7 +39,7 @@ export const InvitationPreview = withCardStateProvider((props: UserOrganizationI
       })
       .then(([updatedItem, organization]) => {
         // Update cache in case another listener depends on it
-        updateCacheInPlace(userInvitations)(updatedItem);
+        void userInvitations?.setData?.(cachedPages => populateCacheUpdateItem(updatedItem, cachedPages));
         setAcceptedOrganization(organization);
       })
       .catch(err => handleError(err, [], card.setError));

packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx

@@ -4,7 +4,7 @@ import { useCoreOrganizationList } from '../../contexts';
 import { localizationKeys, Text } from '../../customizables';
 import { useCardState, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
-import { updateCacheInPlace } from '../OrganizationSwitcher/utils';
+import { populateCacheUpdateItem } from '../OrganizationSwitcher/utils';
 import { PreviewListItem, PreviewListItemButton } from './shared';
 import { organizationListParams } from './utils';
 
@@ -17,7 +17,7 @@ export const AcceptRejectInvitationButtons = (props: OrganizationSuggestionResou
   const handleAccept = () => {
     return card
       .runAsync(props.accept)
-      .then(updateCacheInPlace(userSuggestions))
+      .then(updatedItem => userSuggestions?.setData?.(pages => populateCacheUpdateItem(updatedItem, pages)))
       .catch(err => handleError(err, [], card.setError));
   };
 

packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx

@@ -9,25 +9,18 @@ import { DataTable, RoleSelect, RowContainer } from './MemberListTable';
 
 export const ActiveMembersList = () => {
   const card = useCardState();
-  const { organization, memberships, ...rest } = useCoreOrganization({
+  const { organization, memberships } = useCoreOrganization({
     memberships: true,
   });
 
-  const mutateSwrState = () => {
-    const unstable__mutate = (rest as any).unstable__mutate;
-    if (unstable__mutate && typeof unstable__mutate === 'function') {
-      unstable__mutate();
-    }
-  };
-
   if (!organization) {
     return null;
   }
 
   const handleRoleChange = (membership: OrganizationMembershipResource) => (newRole: MembershipRole) => {
     return card
       .runAsync(async () => {
-        await membership.update({ role: newRole });
+        return await membership.update({ role: newRole });
       })
       .catch(err => handleError(err, [], card.setError));
   };
@@ -36,9 +29,9 @@ export const ActiveMembersList = () => {
     return card
       .runAsync(async () => {
         const destroyedMembership = await membership.destroy();
+        await memberships?.revalidate?.();
         return destroyedMembership;
       })
-      .then(mutateSwrState)
       .catch(err => handleError(err, [], card.setError));
   };
 

packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx

@@ -66,7 +66,7 @@ export const RemoveDomainPage = () => {
       successMessage={localizationKeys('organizationProfile.removeDomainPage.successMessage', {
         domain: ref.current?.name,
       })}
-      deleteResource={() => domain?.delete().then(() => (domains as any).unstable__mutate())}
+      deleteResource={() => domain?.delete().then(() => domains?.revalidate?.())}
       breadcrumbTitle={localizationKeys('organizationProfile.profilePage.domainSection.title')}
       Breadcrumbs={OrganizationProfileBreadcrumbs}
     />

packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx

@@ -49,23 +49,29 @@ const RequestRow = withCardStateProvider(
   (props: { request: OrganizationMembershipRequestResource; onError: ReturnType<typeof useCardState>['setError'] }) => {
     const { request, onError } = props;
     const card = useCardState();
-    const { membershipRequests } = useCoreOrganization({
+    const { membership, membershipRequests } = useCoreOrganization({
       membershipRequests: membershipRequestsParams,
     });
 
     const onAccept = () => {
+      if (!membership || !membershipRequests) {
+        return;
+      }
       return card
         .runAsync(async () => {
           await request.accept();
-          await (membershipRequests as any).unstable__mutate?.();
+          await membershipRequests.revalidate();
         }, 'accept')
         .catch(err => handleError(err, [], onError));
     };
     const onReject = () => {
+      if (!membership || !membershipRequests) {
+        return;
+      }
       return card
         .runAsync(async () => {
           await request.reject();
-          await (membershipRequests as any).unstable__mutate?.();
+          await membershipRequests.revalidate();
         }, 'reject')
         .catch(err => handleError(err, [], onError));
     };

packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx

@@ -55,7 +55,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
   const card = useCardState();
   const { organizationSettings } = useEnvironment();
 
-  const { organization, domains } = useCoreOrganization({
+  const { membership, organization, domains } = useCoreOrganization({
     domains: {
       infinite: true,
     },
@@ -147,7 +147,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
   });
 
   const updateEnrollmentMode = async () => {
-    if (!domain || !organization) {
+    if (!domain || !organization || !membership || !domains) {
       return;
     }
 
@@ -157,7 +157,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
         deletePending: deletePending.checked,
       });
 
-      await (domains as any).unstable__mutate();
+      await domains.revalidate();
 
       await navigate('../../');
     } catch (e) {

packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx

@@ -9,7 +9,7 @@ import { useInView } from '../../hooks';
 import type { PropsOfComponent } from '../../styledSystem';
 import { common } from '../../styledSystem';
 import { handleError } from '../../utils';
-import { organizationListParams, removeItemFromPaginatedCache, updateCacheInPlace } from './utils';
+import { organizationListParams, populateCacheRemoveItem, populateCacheUpdateItem } from './utils';
 
 const useFetchInvitations = () => {
   const { userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
@@ -44,7 +44,7 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
   const handleAccept = () => {
     return card
       .runAsync(props.accept)
-      .then(updateCacheInPlace(userSuggestions))
+      .then(updatedItem => userSuggestions?.setData?.(pages => populateCacheUpdateItem(updatedItem, pages)))
       .catch(err => handleError(err, [], card.setError));
   };
 
@@ -81,7 +81,7 @@ const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource
   const handleAccept = () => {
     return card
       .runAsync(props.accept)
-      .then(removeItemFromPaginatedCache(userInvitations))
+      .then(updatedItem => userInvitations?.setData?.(pages => populateCacheRemoveItem(updatedItem, pages)))
       .catch(err => handleError(err, [], card.setError));
   };
 

packages/clerk-js/src/ui/components/OrganizationSwitcher/utils.ts

@@ -17,9 +17,20 @@ export const organizationListParams = {
 
 export const populateCacheUpdateItem = <T extends { id: string }>(
   updatedItem: T,
-  itemsInfinitePages: ClerkPaginatedResponse<T>[],
+  itemsInfinitePages: (ClerkPaginatedResponse<T> | undefined)[] | undefined,
 ) => {
+  if (typeof itemsInfinitePages === 'undefined') {
+    return [{ data: [updatedItem], total_count: 1 }];
+  }
+
+  /**
+   * We should "preserve" an undefined page if one is found. For example if swr triggers 2 requests, page 1 & page2, and the request for page2 resolves first, at that point in memory itemsInfinitePages would look like this [undefined, {....}]
+   * if SWR says that has fetched 2 pages but the first result of is undefined, we should not return back an array with 1 item as this will end up having cacheKeys that point nowhere.
+   */
   return itemsInfinitePages.map(item => {
+    if (typeof item === 'undefined') {
+      return item;
+    }
     const newData = item.data.map(obj => {
       if (obj.id === updatedItem.id) {
         return {
@@ -33,38 +44,27 @@ export const populateCacheUpdateItem = <T extends { id: string }>(
   });
 };
 
-export const updateCacheInPlace =
-  (userSuggestions: any) =>
-  <T extends { id: string }>(result: T): any => {
-    userSuggestions?.unstable__mutate?.(result, {
-      populateCache: populateCacheUpdateItem,
-      // Since `accept` gives back the updated information,
-      // we don't need to revalidate here.
-      revalidate: false,
-    });
-  };
-
 export const populateCacheRemoveItem = <T extends { id: string }>(
   updatedItem: T,
-  itemsInfinitePages: ClerkPaginatedResponse<T>[],
+  itemsInfinitePages: (ClerkPaginatedResponse<T> | undefined)[] | undefined,
 ) => {
-  const prevTotalCount = itemsInfinitePages[itemsInfinitePages.length - 1].total_count;
+  const prevTotalCount = itemsInfinitePages?.[itemsInfinitePages.length - 1]?.total_count;
 
-  return itemsInfinitePages.map(item => {
+  if (!prevTotalCount) {
+    return undefined;
+  }
+
+  /**
+   * We should "preserve" an undefined page if one is found. For example if swr triggers 2 requests, page 1 & page2, and the request for page2 resolves first, at that point in memory itemsInfinitePages would look like this [undefined, {....}]
+   * if SWR says that has fetched 2 pages but the first result of is undefined, we should not return back an array with 1 item as this will end up having cacheKeys that point nowhere.
+   */
+  return itemsInfinitePages?.map(item => {
+    if (typeof item === 'undefined') {
+      return item;
+    }
     const newData = item.data.filter(obj => {
       return obj.id !== updatedItem.id;
     });
     return { ...item, data: newData, total_count: prevTotalCount - 1 };
   });
 };
-
-export const removeItemFromPaginatedCache =
-  (userInvitations: any) =>
-  <T extends { id: string }>(result: T): any => {
-    userInvitations?.unstable__mutate?.(result, {
-      populateCache: populateCacheRemoveItem,
-      // Since `accept` gives back the updated information,
-      // we don't need to revalidate here.
-      revalidate: false,
-    });
-  };

packages/shared/src/react/hooks/useOrganization.tsx

@@ -56,7 +56,9 @@ type UseOrganizationParams = {
       });
 };
 
-type UseOrganizationReturn =
+type UseOrganization = <T extends UseOrganizationParams>(
+  params?: T,
+) =>
   | {
       isLoaded: false;
       organization: undefined;
@@ -103,14 +105,24 @@ type UseOrganizationReturn =
        */
       membershipList: OrganizationMembershipResource[] | null | undefined;
       membership: OrganizationMembershipResource | null | undefined;
-      domains: PaginatedResources<OrganizationDomainResource> | null;
-      membershipRequests: PaginatedResources<OrganizationMembershipRequestResource> | null;
-      memberships: PaginatedResources<OrganizationMembershipResource> | null;
-      invitations: PaginatedResources<OrganizationInvitationResource> | null;
+      domains: PaginatedResources<
+        OrganizationDomainResource,
+        T['membershipRequests'] extends { infinite: true } ? true : false
+      > | null;
+      membershipRequests: PaginatedResources<
+        OrganizationMembershipRequestResource,
+        T['membershipRequests'] extends { infinite: true } ? true : false
+      > | null;
+      memberships: PaginatedResources<
+        OrganizationMembershipResource,
+        T['memberships'] extends { infinite: true } ? true : false
+      > | null;
+      invitations: PaginatedResources<
+        OrganizationInvitationResource,
+        T['invitations'] extends { infinite: true } ? true : false
+      > | null;
     };
 
-type UseOrganization = (params?: UseOrganizationParams) => UseOrganizationReturn;
-
 const undefinedPaginatedResource = {
   data: undefined,
   count: undefined,
@@ -124,6 +136,8 @@ const undefinedPaginatedResource = {
   fetchPrevious: undefined,
   hasNextPage: false,
   hasPreviousPage: false,
+  revalidate: undefined,
+  setData: undefined,
 } as const;
 
 export const useOrganization: UseOrganization = params => {

packages/shared/src/react/hooks/useOrganizationList.tsx

@@ -38,8 +38,26 @@ type UseOrganizationListParams = {
 };
 
 type OrganizationList = ReturnType<typeof createOrganizationList>;
+const undefinedPaginatedResource = {
+  data: undefined,
+  count: undefined,
+  isLoading: false,
+  isFetching: false,
+  isError: false,
+  page: undefined,
+  pageCount: undefined,
+  fetchPage: undefined,
+  fetchNext: undefined,
+  fetchPrevious: undefined,
+  hasNextPage: false,
+  hasPreviousPage: false,
+  revalidate: undefined,
+  setData: undefined,
+} as const;
 
-type UseOrganizationListReturn =
+type UseOrganizationList = <T extends UseOrganizationListParams>(
+  params?: T,
+) =>
   | {
       isLoaded: false;
       /**
@@ -60,29 +78,20 @@ type UseOrganizationListReturn =
       organizationList: OrganizationList;
       createOrganization: (params: CreateOrganizationParams) => Promise<OrganizationResource>;
       setActive: SetActive;
-      userMemberships: PaginatedResources<OrganizationMembershipResource>;
-      userInvitations: PaginatedResources<UserOrganizationInvitationResource>;
-      userSuggestions: PaginatedResources<OrganizationSuggestionResource>;
+      userMemberships: PaginatedResources<
+        OrganizationMembershipResource,
+        T['userMemberships'] extends { infinite: true } ? true : false
+      >;
+      userInvitations: PaginatedResources<
+        UserOrganizationInvitationResource,
+        T['userInvitations'] extends { infinite: true } ? true : false
+      >;
+      userSuggestions: PaginatedResources<
+        OrganizationSuggestionResource,
+        T['userSuggestions'] extends { infinite: true } ? true : false
+      >;
     };
 
-const undefinedPaginatedResource = {
-  data: undefined,
-  count: undefined,
-  isLoading: false,
-  isFetching: false,
-  isError: false,
-  page: undefined,
-  pageCount: undefined,
-  fetchPage: undefined,
-  fetchNext: undefined,
-  fetchPrevious: undefined,
-  hasNextPage: false,
-  hasPreviousPage: false,
-  unstable__mutate: undefined,
-} as const;
-
-type UseOrganizationList = (params?: UseOrganizationListParams) => UseOrganizationListReturn;
-
 export const useOrganizationList: UseOrganizationList = params => {
   const { userMemberships, userInvitations, userSuggestions } = params || {};