fix(clerk-js): Replace mutate with setCache and revalidate

clerk · Oct 30, 2023 · 32f4c06 · 32f4c06
1 parent c29d47e
commit 32f4c06
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 40 deletions.
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserInvitationList.tsx b/packages/clerk-js/src/ui/components/OrganizationList/UserInvitationList.tsx
@@ -39,12 +39,7 @@ export const InvitationPreview = withCardStateProvider((props: UserOrganizationI
       })
       .then(([updatedItem, organization]) => {
         // Update cache in case another listener depends on it
-        userInvitations?.mutate?.(pages => populateCacheUpdateItem(updatedItem, pages), {
-          // Since `accept` gives back the updated information,
-          // we don't need to revalidate here.
-          revalidate: false,
-        });
-
+        void userInvitations?.setCache?.(cachedPages => populateCacheUpdateItem(updatedItem, cachedPages));
         setAcceptedOrganization(organization);
       })
       .catch(err => handleError(err, [], card.setError));

diff --git a/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationList/UserSuggestionList.tsx
@@ -17,13 +17,7 @@ export const AcceptRejectInvitationButtons = (props: OrganizationSuggestionResou
   const handleAccept = () => {
     return card
       .runAsync(props.accept)
-      .then(updatedItem => {
-        userSuggestions?.mutate?.(pages => populateCacheUpdateItem(updatedItem, pages), {
-          // Since `accept` gives back the updated information,
-          // we don't need to revalidate here.
-          revalidate: false,
-        });
-      })
+      .then(updatedItem => userSuggestions?.setCache?.(pages => populateCacheUpdateItem(updatedItem, pages)))
       .catch(err => handleError(err, [], card.setError));
   };
 

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActiveMembersList.tsx
@@ -13,13 +13,6 @@ export const ActiveMembersList = () => {
     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;
   }
@@ -35,9 +28,10 @@ export const ActiveMembersList = () => {
   const handleRemove = (membership: OrganizationMembershipResource) => () => {
     return card
       .runAsync(async () => {
-        return await membership.destroy();
+        const destroyedMembership = await membership.destroy();
+        await memberships?.revalidate?.();
+        return destroyedMembership;
       })
-      .then(mutateSwrState)
       .catch(err => handleError(err, [], card.setError));
   };
 

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RemoveDomainPage.tsx b/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?.mutate?.())}
+      deleteResource={() => domain?.delete().then(() => domains?.revalidate?.())}
       breadcrumbTitle={localizationKeys('organizationProfile.profilePage.domainSection.title')}
       Breadcrumbs={OrganizationProfileBreadcrumbs}
     />

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/RequestToJoinList.tsx
@@ -60,7 +60,7 @@ const RequestRow = withCardStateProvider(
       return card
         .runAsync(async () => {
           await request.accept();
-          await membershipRequests.mutate();
+          await membershipRequests.revalidate();
         }, 'accept')
         .catch(err => handleError(err, [], onError));
     };
@@ -71,7 +71,7 @@ const RequestRow = withCardStateProvider(
       return card
         .runAsync(async () => {
           await request.reject();
-          await membershipRequests.mutate();
+          await membershipRequests.revalidate();
         }, 'reject')
         .catch(err => handleError(err, [], onError));
     };

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/VerifiedDomainPage.tsx
@@ -153,7 +153,7 @@ export const VerifiedDomainPage = withCardStateProvider(() => {
         deletePending: deletePending.checked,
       });
 
-      await domains.mutate();
+      await domains.revalidate();
 
       await navigate('../../');
     } catch (e) {

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -44,13 +44,7 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) =>
   const handleAccept = () => {
     return card
       .runAsync(props.accept)
-      .then(updatedItem => {
-        userSuggestions?.mutate?.(pages => populateCacheUpdateItem(updatedItem, pages), {
-          // Since `accept` gives back the updated information,
-          // we don't need to revalidate here.
-          revalidate: false,
-        });
-      })
+      .then(updatedItem => userSuggestions?.setCache?.(pages => populateCacheUpdateItem(updatedItem, pages)))
       .catch(err => handleError(err, [], card.setError));
   };
 
@@ -87,13 +81,7 @@ const AcceptRejectInvitationButtons = (props: UserOrganizationInvitationResource
   const handleAccept = () => {
     return card
       .runAsync(props.accept)
-      .then(updatedItem => {
-        userInvitations?.mutate?.(pages => populateCacheRemoveItem(updatedItem, pages), {
-          // Since `accept` gives back the updated information,
-          // we don't need to revalidate here.
-          revalidate: false,
-        });
-      })
+      .then(updatedItem => userInvitations?.setCache?.(pages => populateCacheRemoveItem(updatedItem, pages)))
       .catch(err => handleError(err, [], card.setError));
   };