fix(clerk-js): Revalidate invitations table after invitation screen s…

…ubmit (#2195) (#2197)
clerk · Nov 23, 2023 · e7d8730 · e7d8730
1 parent bfa1b78
commit e7d8730
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/grumpy-suns-boil.md b/.changeset/grumpy-suns-boil.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Revalidate invitations table after invitation screen submit.
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
@@ -25,7 +25,12 @@ type InviteMembersFormProps = {
 export const InviteMembersForm = (props: InviteMembersFormProps) => {
   const { navigate } = useRouter();
   const { onSuccess, onReset = () => navigate('..'), resetButtonLabel } = props;
-  const { organization } = useCoreOrganization();
+  const { organization, invitations } = useCoreOrganization({
+    invitations: {
+      pageSize: 10,
+      keepPreviousData: true,
+    },
+  });
   const card = useCardState();
   const { t, locale } = useLocalizations();
   const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);
@@ -73,7 +78,10 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
         emailAddresses: emailAddressField.value.split(','),
         role: submittedData.get('role') as MembershipRole,
       })
-      .then(onSuccess)
+      .then(async () => {
+        await invitations?.revalidate?.();
+        return onSuccess();
+      })
       .catch(err => {
         if (isClerkAPIResponseError(err)) {
           removeInvalidEmails(err.errors[0]);