useOrganizationMemberships
The useOrganizationMemberships hook fetches and provides a list of all organization memberships for the current user.
Return Value
organizationMemberships
OrganizationMembershipWithOrganization[]
List of organization memberships for the current user
Whether the memberships are loading
Show Refetch the memberships list
Resolves when the memberships list is refetched
import { useOrganizationMemberships } from "@wacht/react-router";
function OrganizationList() {
const { organizationMemberships, loading, refetch } = useOrganizationMemberships();
return (
<ul>
{organizationMemberships?.map((membership) => (
<li key={membership.id}>
{membership.organization.name}
</li>
))}
</ul>
);
}
Data Structures
Show OrganizationMembershipWithOrganization
interface OrganizationMembershipWithOrganization {
id: string;
organization: Organization;
user_id: string;
roles: OrganizationRole[];
public_metadata: Record<string, unknown>;
created_at: string;
updated_at: string;
eligibility_restriction?: EligibilityRestriction;
}
Examples
List All Organizations
import { useOrganizationMemberships } from "@wacht/react-router";
function OrgList() {
const { organizationMemberships, loading } = useOrganizationMemberships();
if (loading) return <div>Loading...</div>;
return (
<ul>
{organizationMemberships.map((membership) => (
<li key={membership.id}>
{membership.organization.name}
</li>
))}
</ul>
);
}
Refetch After Update
import { useOrganizationMemberships, useOrganizationList } from "@wacht/react-router";
function OrgManager() {
const { refetch } = useOrganizationMemberships();
const { createOrganization } = useOrganizationList();
const handleCreate = async () => {
await createOrganization({ name: "New Org" });
await refetch();
};
return <button onClick={handleCreate}>Create Organization</button>;
}
