Add revalidation on user update

Author: LauraBeatris

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx

@@ -130,7 +130,7 @@ const MembershipPreview = withCardStateProvider((props: { organization: Organiza
 const InvitationPreview = withCardStateProvider((props: UserOrganizationInvitationResource) => {
   const card = useCardState();
   const { getOrganization } = useClerk();
-  const [acceptInvitation, setAcceptedInvitation] = useState<OrganizationResource | null>(null);
+  const [acceptedInvitation, setAcceptedInvitation] = useState<OrganizationResource | null>(null);
   const { userInvitations, userMemberships } = useOrganizationList({
     userInvitations: organizationListParams.userInvitations,
     userMemberships: organizationListParams.userMemberships,
@@ -163,8 +163,8 @@ const InvitationPreview = withCardStateProvider((props: UserOrganizationInvitati
     return null;
   }
 
-  if (acceptInvitation) {
-    return <MembershipPreview organization={acceptInvitation} />;
+  if (acceptedInvitation) {
+    return <MembershipPreview organization={acceptedInvitation} />;
   }
 
   return (

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx

@@ -1,5 +1,5 @@
-import { useClerk, useSession, useUser } from '@clerk/shared/react';
-import { useState } from 'react';
+import { useClerk, useSession, useUserContext } from '@clerk/shared/react';
+import { useEffect, useState } from 'react';
 
 import { useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';
 import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
@@ -14,7 +14,7 @@ import { CreateOrganizationScreen } from './CreateOrganizationScreen';
 
 const TaskChooseOrganizationInternal = () => {
   const { signOut } = useClerk();
-  const { user } = useUser();
+  const user = useUserContext();
   const { session } = useSession();
   const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
   const { otherSessions } = useMultipleSessions({ user });
@@ -32,6 +32,17 @@ const TaskChooseOrganizationInternal = () => {
   const hasExistingResources = !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count);
   const identifier = user?.primaryEmailAddress?.emailAddress ?? user?.username;
 
+  // Revalidates organization memberships from client piggybacking
+  // TODO (ORGS-784): Introduce architecture to invalidate SWR queries based on client piggybacking
+  const hasUpdatedOnClient = user?.organizationMemberships?.length !== userMemberships.count;
+  useEffect(() => {
+    if (!hasUpdatedOnClient) {
+      return;
+    }
+
+    void userMemberships?.revalidate?.();
+  }, [hasUpdatedOnClient, userMemberships]);
+
   return (
     <Flow.Root flow='taskChooseOrganization'>
       <Card.Root>