fix(clerk-js,types): Handle missing publicUserData in OrganizationMembership (#6016)

Author: tmilewski

.changeset/three-days-wash.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Handle missing `publicUserData` in `OrganizationMembership`

packages/clerk-js/src/core/resources/OrganizationMembership.ts

@@ -17,7 +17,7 @@ import { BaseResource, Organization, PublicUserData } from './internal';
 export class OrganizationMembership extends BaseResource implements OrganizationMembershipResource {
   id!: string;
   publicMetadata: OrganizationMembershipPublicMetadata = {};
-  publicUserData!: PublicUserData;
+  publicUserData?: PublicUserData;
   organization!: Organization;
   permissions: OrganizationPermissionKey[] = [];
   role!: OrganizationCustomRoleKey;
@@ -50,14 +50,16 @@ export class OrganizationMembership extends BaseResource implements Organization
 
   destroy = async (): Promise<OrganizationMembership> => {
     // TODO: Revise the return type of _baseDelete
+    // TODO: Handle case where publicUserData is not present
     return (await this._baseDelete({
-      path: `/organizations/${this.organization.id}/memberships/${this.publicUserData.userId}`,
+      path: `/organizations/${this.organization.id}/memberships/${this.publicUserData?.userId}`,
     })) as unknown as OrganizationMembership;
   };
 
   update = async ({ role }: UpdateOrganizationMembershipParams): Promise<OrganizationMembership> => {
+    // TODO: Handle case where publicUserData is not present
     return await this._basePatch({
-      path: `/organizations/${this.organization.id}/memberships/${this.publicUserData.userId}`,
+      path: `/organizations/${this.organization.id}/memberships/${this.publicUserData?.userId}`,
       body: { role },
     });
   };
@@ -86,7 +88,7 @@ export class OrganizationMembership extends BaseResource implements Organization
       id: this.id,
       organization: this.organization.__internal_toSnapshot(),
       public_metadata: this.publicMetadata,
-      public_user_data: this.publicUserData.__internal_toSnapshot(),
+      public_user_data: this.publicUserData?.__internal_toSnapshot(),
       permissions: this.permissions,
       role: this.role,
       created_at: this.createdAt.getTime(),

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

@@ -76,7 +76,7 @@ const MemberRow = (props: {
   const card = useCardState();
   const { user } = useUser();
 
-  const isCurrentUser = user?.id === membership.publicUserData.userId;
+  const isCurrentUser = user?.id === membership.publicUserData?.userId;
   const unlocalizedRoleLabel = options?.find(a => a.value === membership.role)?.label;
 
   return (
@@ -85,7 +85,7 @@ const MemberRow = (props: {
         <UserPreview
           sx={{ maxWidth: '30ch' }}
           user={membership.publicUserData}
-          subtitle={membership.publicUserData.identifier}
+          subtitle={membership.publicUserData?.identifier}
           badge={isCurrentUser && <Badge localizationKey={localizationKeys('badge__you')} />}
         />
       </Td>

packages/types/src/json.ts

@@ -390,7 +390,7 @@ export interface OrganizationMembershipJSON extends ClerkResourceJSON {
   organization: OrganizationJSON;
   permissions: OrganizationPermissionKey[];
   public_metadata: OrganizationMembershipPublicMetadata;
-  public_user_data: PublicUserDataJSON;
+  public_user_data?: PublicUserDataJSON;
   role: OrganizationCustomRoleKey;
   created_at: number;
   updated_at: number;

packages/types/src/organizationMembership.ts

@@ -48,7 +48,7 @@ export interface OrganizationMembershipResource extends ClerkResource {
   organization: OrganizationResource;
   permissions: OrganizationPermissionKey[];
   publicMetadata: OrganizationMembershipPublicMetadata;
-  publicUserData: PublicUserData;
+  publicUserData?: PublicUserData;
   role: OrganizationCustomRoleKey;
   createdAt: Date;
   updatedAt: Date;