Skip to main content

useOrganizationList()

The useOrganizationList() hook exposes a paginated interface facilitating the retrieval and management of the diverse organization contexts mapped to the authenticated user. This hook furnishes the necessary programmatic primitives required to construct custom organizational switching mechanisms, deployment creation sequences, and invitation resolution interfaces while adhering to strict internal specifications.

Hook Import

import { useOrganizationList } from "@wacht/tanstack-router";

Hook Interface

loading
boolean
Boolean flag denoting network boundary readiness and state reconciliation execution tracking continuously.
organizations
Organization[]
A structural array detailing the fully hydrated Wacht Organization objects associated natively with the authenticated context.
error
Error | null
Captures network failures or processing exceptions encountered during the fetching process sequence iteratively.
refetch
() => Promise<void>
Triggers manual invalidation and regeneration of the organization list from the explicit source of truth backend infrastructure instantly.
Organization Lifecycle Management
Functions
Multi-Tenant Member Approvals
Functions
Invitation Processing Interface
Functions

Implementation Guidelines

Orchestrating Invitation Context Resolutions

A primary implementation vector for this hook involves the construction of interfaces enabling users to resolve pending organizational invitation mappings independently.
import { useOrganizationList } from "@wacht/tanstack-router";

export function OrganizationResolutionInterface() {
  const { loading, organizations } = useOrganizationList();

  if (loading) return <div className="text-zinc-500 font-mono text-xs uppercase tracking-wide">Resolving tenancy mappings...</div>;

  if (!organizations || organizations.length === 0) {
    return <p className="text-sm text-zinc-600">Context matrix yields no valid organizational federation targets currently.</p>;
  }

  return (
    <ul className="divide-y divide-zinc-200 border rounded-md max-w-sm">
      {organizations.map((org) => (
        <li key={org.id} className="py-4 px-4 flex items-center justify-between hover:bg-zinc-50 transition-colors">
          <div>
             <p className="font-semibold text-zinc-900 tracking-tight text-sm">
               {org.name}
             </p>
             <p className="text-xs text-zinc-500 font-mono">ID: {org.id.split('-')[0]}</p>
          </div>
          <button className="text-xs font-medium text-emerald-700 bg-emerald-50 px-3 py-1.5 rounded-md hover:bg-emerald-100 transition-colors border border-emerald-200">
             Engage Context
          </button>
        </li>
      ))}
    </ul>
  );
}