fix(admin): stop duplicate API calls across admin tables

web/apps/admin/src/pages/organizations/details/index.tsx

@@ -1,8 +1,13 @@
 import { OrganizationDetailsView, useAdminPaths } from '@raystack/frontier/admin';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useLayoutEffect, useState } from 'react';
 import { useLocation, useNavigate, useParams, Outlet, Navigate } from 'react-router-dom';
-import { useQuery } from '@connectrpc/connect-query';
-import { FrontierServiceQueries } from '@raystack/proton/frontier';
+import { createConnectQueryKey, useQuery, useTransport } from '@connectrpc/connect-query';
+import { useQueryClient } from '@tanstack/react-query';
+import { create } from '@bufbuild/protobuf';
+import {
+  FrontierServiceQueries,
+  GetOrganizationResponseSchema,
+} from '@raystack/proton/frontier';
 import { AppContext } from '~/contexts/App';
 import { clients } from '~/connect/clients';
 import { exportCsvFromStream } from '~/utils/helper';
@@ -33,6 +38,8 @@ export default function OrganizationDetailsPage() {
   const paths = useAdminPaths();
   const { config } = useContext(AppContext);
   const [countries, setCountries] = useState<string[]>([]);
+  const queryClient = useQueryClient();
+  const transport = useTransport();
 
   const incomingOrgId = (location.state as { orgId?: string } | null)?.orgId;
 
@@ -53,8 +60,9 @@ export default function OrganizationDetailsPage() {
 
   /*
    * Cold-load resolve (only when state carries no id):
-   * - getOrganization takes an id OR a slug and returns disabled orgs too,
-   *   so a single call covers every URL form (server GetRaw branches on UUID)
+   * - getOrganization takes an id OR a slug, so a single call covers every URL
+   *   form (server GetRaw branches on UUID)
+   * - disabled orgs resolve for superusers only; the console is superuser-only
    * - a UUID param is already the id, but we still resolve to read the slug +
    *   state for the canonical-URL rewrite below
    */
@@ -77,6 +85,25 @@ export default function OrganizationDetailsPage() {
   const orgId = stateOrgId || (paramIsId ? urlParam : org?.id);
   const notFound = needsResolve && isSuccess && !org?.id;
 
+  /* Resolve caches under the slug, so seed the id key the view reads. Layout,
+   * not passive: the view subscribes to that key in a passive effect this same
+   * commit. Empty keys only — this copy can go stale, edits invalidate the id. */
+  useLayoutEffect(() => {
+    if (!org?.id || org.id === urlParam) return;
+    const orgKey = createConnectQueryKey({
+      schema: FrontierServiceQueries.getOrganization,
+      transport,
+      input: { id: org.id },
+      cardinality: 'finite',
+    });
+    if (queryClient.getQueryData(orgKey) === undefined) {
+      queryClient.setQueryData(
+        orgKey,
+        create(GetOrganizationResponseSchema, { organization: org }),
+      );
+    }
+  }, [org, urlParam, queryClient, transport]);
+
   /*
    * Old UUID bookmark → canonical slug URL:
    * - one live URL per org; replace keeps the back-button sane

web/sdk/admin/hooks/useLoadMore.ts

@@ -0,0 +1,49 @@
+import { useCallback, useRef } from "react";
+
+export interface UseLoadMoreOptions {
+  hasNextPage?: boolean;
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => Promise<unknown>;
+  /** Skip while the query is errored, so scrolling cannot retry a failed page. */
+  isError?: boolean;
+  /** Names the rows in the console message, e.g. "audit logs". */
+  label: string;
+}
+
+/*
+  Guarded "load more" for a server table's infinite query.
+  - VirtualizedContent calls this straight from onScroll and react-query
+    notifies observers on a macrotask, so hasNextPage/isFetchingNextPage are
+    still last render's values through a scroll burst
+  - fetchNextPage defaults to cancelRefetch: true, so an unguarded repeat aborts
+    the in-flight page and re-issues it; only the ref flips in time to stop that
+  - the render-derived flags stay as a cheap first filter
+*/
+export const useLoadMore = ({
+  hasNextPage,
+  isFetchingNextPage,
+  fetchNextPage,
+  isError,
+  label,
+}: UseLoadMoreOptions) => {
+  const isLoadingMoreRef = useRef(false);
+
+  return useCallback(async () => {
+    if (
+      !hasNextPage ||
+      isFetchingNextPage ||
+      isError ||
+      isLoadingMoreRef.current
+    ) {
+      return;
+    }
+    isLoadingMoreRef.current = true;
+    try {
+      await fetchNextPage();
+    } catch (error) {
+      console.error(`Error loading more ${label}:`, error);
+    } finally {
+      isLoadingMoreRef.current = false;
+    }
+  }, [hasNextPage, isFetchingNextPage, isError, fetchNextPage, label]);
+};

web/sdk/admin/hooks/useOrgMembersMap.ts

@@ -0,0 +1,26 @@
+import { useQuery } from "@connectrpc/connect-query";
+import { FrontierServiceQueries, type User } from "@raystack/proton/frontier";
+import type { ListOrganizationUsersResponse } from "@raystack/proton/frontier";
+import { SHARED_QUERY_STALE_TIME } from "~/admin/utils/constants";
+
+// Stable identity so react-query memoizes the select.
+const toMembersMap = (data?: ListOrganizationUsersResponse) =>
+  (data?.users || []).reduce(
+    (acc, user) => {
+      acc[user.id || ""] = user;
+      return acc;
+    },
+    {} as Record<string, User>,
+  );
+
+/** Org members keyed by id. Deduped across callers; empty orgId disables. */
+export const useOrgMembersMap = (orgId?: string) =>
+  useQuery(
+    FrontierServiceQueries.listOrganizationUsers,
+    { id: orgId || "" },
+    {
+      enabled: !!orgId,
+      staleTime: SHARED_QUERY_STALE_TIME,
+      select: toMembersMap,
+    },
+  );

web/sdk/admin/hooks/useOrganizationRoles.ts

@@ -6,7 +6,7 @@ import {
   ListRolesRequestSchema,
   ListOrganizationRolesRequestSchema,
 } from "@raystack/proton/frontier";
-import { SCOPES } from "~/admin/utils/constants";
+import { SCOPES, SHARED_QUERY_STALE_TIME } from "~/admin/utils/constants";
 
 interface UseOrganizationRolesOptions {
   /** Skip both fetches while false. Defaults to true. */
@@ -16,7 +16,7 @@ interface UseOrganizationRolesOptions {
 /*
   Roles assignable within an org: the platform's defaults plus the org's custom
   ones. Both halves are needed — a role id can come from either.
-  - react-query caches per key, so repeat callers share one fetch
+  - nothing writes roles, so repeat callers share one cached fetch
   - pass undefined/empty to skip the org-scoped half
 */
 export const useOrganizationRoles = (
@@ -32,6 +32,7 @@ export const useOrganizationRoles = (
     create(ListRolesRequestSchema, { scopes: [SCOPES.ORG] }),
     {
       enabled,
+      staleTime: SHARED_QUERY_STALE_TIME,
       select: (data) => data?.roles || [],
     },
   );
@@ -48,6 +49,7 @@ export const useOrganizationRoles = (
     }),
     {
       enabled: enabled && !!orgId,
+      staleTime: SHARED_QUERY_STALE_TIME,
       select: (data) => data?.roles || [],
     },
   );

web/sdk/admin/hooks/useServerTableQuery.ts

@@ -0,0 +1,91 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
+import type { RQLRequest } from "@raystack/proton/frontier";
+
+import { DEFAULT_PAGE_SIZE } from "~/utils/connect-pagination";
+import {
+  transformDataTableQueryToRQLRequest,
+  type TransformOptions,
+} from "~/utils/transform-query";
+import { useDebouncedValue } from "~hooks";
+
+export interface ServerTableQueryOptions {
+  /** Sort applied until the user picks another. Must match the table's `defaultSort`. */
+  defaultSort?: DataTableSort;
+  /** Field name mapping for the RQL request. Read through a ref, so an inline object is fine. */
+  transformOptions?: TransformOptions;
+  /** Search owned outside the table, e.g. the organization page's shared box. */
+  search?: string;
+  /** Adjust the query before it becomes a request, e.g. converting units. */
+  // eslint-disable-next-line no-unused-vars -- callback param name is for type documentation
+  mapQuery?: (query: DataTableQuery) => DataTableQuery;
+  /** Debounce applied to the request, not to the table's own state. */
+  debounceMs?: number;
+}
+
+export interface ServerTableQuery {
+  /** Pass to DataTable's `query` prop. Updates immediately. */
+  tableQuery: DataTableQuery;
+  /** Pass to the RPC. Trails `tableQuery` by `debounceMs`. */
+  rqlQuery: RQLRequest;
+  /** Pass to DataTable's `onTableQueryChange` prop. */
+  // eslint-disable-next-line no-unused-vars -- callback param name is for type documentation
+  onTableQueryChange: (query: DataTableQuery) => void;
+}
+
+/**
+ * Query state for a `mode="server"` DataTable.
+ *
+ * The initial query carries `defaultSort` on purpose. DataTable seeds its own
+ * state from that prop and emits it on mount unconditionally; if the initial
+ * query here disagreed, that emit would change the request and every table
+ * would fetch its first page twice. Keep the `defaultSort` passed to DataTable
+ * and the one passed here identical.
+ */
+export function useServerTableQuery({
+  defaultSort,
+  transformOptions,
+  search,
+  mapQuery,
+  debounceMs = 200,
+}: ServerTableQueryOptions = {}): ServerTableQuery {
+  const [tableQuery, setTableQuery] = useState<DataTableQuery>(() => ({
+    offset: 0,
+    limit: DEFAULT_PAGE_SIZE,
+    sort: defaultSort ? [defaultSort] : [],
+  }));
+
+  /*
+   * Field mappings are fixed per view, so read them through a ref. Callers
+   * passing an inline object would otherwise change the memo's identity every
+   * render, restarting the debounce timer and never letting it settle.
+   */
+  const transformOptionsRef = useRef(transformOptions);
+  transformOptionsRef.current = transformOptions;
+  const mapQueryRef = useRef(mapQuery);
+  mapQueryRef.current = mapQuery;
+
+  const computedQuery = useMemo(() => {
+    const mapped = mapQueryRef.current
+      ? mapQueryRef.current(tableQuery)
+      : tableQuery;
+    const rql = transformDataTableQueryToRQLRequest(
+      mapped,
+      transformOptionsRef.current,
+    );
+    return search === undefined ? rql : { ...rql, search };
+  }, [tableQuery, search]);
+
+  const rqlQuery = useDebouncedValue(computedQuery, debounceMs);
+
+  /* Any change to filters, sort or search starts again from the first page. */
+  const onTableQueryChange = useCallback((query: DataTableQuery) => {
+    setTableQuery({
+      ...query,
+      offset: 0,
+      limit: query.limit || DEFAULT_PAGE_SIZE,
+    });
+  }, []);
+
+  return { tableQuery, rqlQuery, onTableQueryChange };
+}

web/sdk/admin/utils/constants.ts

@@ -17,6 +17,10 @@ export const DEFAULT_ROLES = {
 
 export const NULL_DATE = "0001-01-01T00:00:00Z";
 
+/* Not a client-wide default: only safe where every writer invalidates the
+ * key, so each query opts in and says why. */
+export const SHARED_QUERY_STALE_TIME = 30 * 1000;
+
 export interface AdminTerminologyConfig {
   organization?: EntityTerminologies;
   project?: EntityTerminologies;