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

web/apps/admin/src/contexts/ConnectProvider.tsx

@@ -4,12 +4,14 @@ import type { ReactNode } from "react";
 import { TransportProvider } from "@connectrpc/connect-query";
 import { jsonTransport as transport } from "~/connect/transport";
 
-// Create a QueryClient instance
+/* Otherwise every mount refetches. Mutations invalidate their own keys;
+ * the search tables opt out with staleTime: 0. */
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: false,
       refetchOnWindowFocus: false,
+      staleTime: 30 * 1000,
     },
   },
 });

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, useRef, 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,26 @@ export default function OrganizationDetailsPage() {
   const orgId = stateOrgId || (paramIsId ? urlParam : org?.id);
   const notFound = needsResolve && isSuccess && !org?.id;
 
+  /* The slug resolve caches under the slug, so seed the id key the view uses.
+   * In render, not an effect: the view mounts this commit. Empty keys only —
+   * this copy can be stale, and edits invalidate the id key, not the slug. */
+  const primedOrgId = useRef<string | undefined>(undefined);
+  if (org?.id && org.id !== urlParam && primedOrgId.current !== org.id) {
+    primedOrgId.current = org.id;
+    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 }),
+      );
+    }
+  }
+
   /*
    * Old UUID bookmark → canonical slug URL:
    * - one live URL per org; replace keeps the back-button sane

web/sdk/admin/hooks/useOrgMembersMap.ts

@@ -0,0 +1,24 @@
+import { useQuery } from "@connectrpc/connect-query";
+import { FrontierServiceQueries, type User } from "@raystack/proton/frontier";
+import type { ListOrganizationUsersResponse } from "@raystack/proton/frontier";
+
+// 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,
+      select: toMembersMap,
+    },
+  );

web/sdk/admin/views/audit-logs/index.tsx

@@ -6,7 +6,7 @@
   Flex,
 } from "@raystack/apsara";
 import { useDebouncedState } from "@raystack/apsara/hooks";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import Navbar from "./navbar";
 import styles from "./audit-logs.module.css";
 import { getColumns } from "./columns";
@@ -48,6 +48,8 @@
 const INITIAL_QUERY: DataTableQuery = {
   offset: 0,
   limit: DEFAULT_PAGE_SIZE,
+  // Must match DataTable's mount emit, or it refetches.
+  sort: [DEFAULT_SORT],
 };
 const TRANSFORM_OPTIONS = {
   fieldNameMapping: {
@@ -65,7 +67,7 @@
   /** App name displayed in the page title. */
   appName?: string;
   /** Callback to export audit logs as CSV with the current query filters applied. */
   onExportCsv?: (query: RQLRequest) => Promise<void>;
   /** Navigate to a link in an audit entry (e.g. org/user page). `state` carries the org id. */
   onNavigate?: (path: string, state?: { orgId?: string }) => void;
 };
@@ -140,12 +142,17 @@
     [queryClient],
   );
 
+  // isFetchingNextPage lags a render; the ref doesn't.
+  const isLoadingMoreRef = useRef(false);
   const handleLoadMore = async () => {
+    if (!hasNextPage || isFetchingNextPage || isLoadingMoreRef.current) return;
+    isLoadingMoreRef.current = true;
     try {
-      if (!hasNextPage) return;
       await fetchNextPage();
     } catch (error) {
       console.error("Error loading more audit logs:", error);
+    } finally {
+      isLoadingMoreRef.current = false;
     }
   };
 

web/sdk/admin/views/invoices/index.tsx

@@ -5,7 +5,7 @@ import {
   EmptyState,
   Flex,
 } from "@raystack/apsara";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { PageTitle } from "../../components/PageTitle";
 import { InvoicesNavabar } from "./navbar";
 import styles from "./invoices.module.css";
@@ -40,6 +40,8 @@ const DEFAULT_SORT: DataTableSort = { name: "createdAt", order: "desc" };
 const INITIAL_QUERY: DataTableQuery = {
   offset: 0,
   limit: DEFAULT_PAGE_SIZE,
+  // Must match DataTable's mount emit, or it refetches.
+  sort: [DEFAULT_SORT],
 };
 
 export type InvoicesViewProps = {
@@ -89,12 +91,17 @@ export default function InvoicesView({ appName }: InvoicesViewProps = {}) {
     });
   };
 
+  // isFetchingNextPage lags a render; the ref doesn't.
+  const isLoadingMoreRef = useRef(false);
   const handleLoadMore = async () => {
+    if (!hasNextPage || isFetchingNextPage || isLoadingMoreRef.current) return;
+    isLoadingMoreRef.current = true;
     try {
-      if (!hasNextPage) return;
       await fetchNextPage();
     } catch (error) {
       console.error("Error loading more invoices:", error);
+    } finally {
+      isLoadingMoreRef.current = false;
     }
   };
 

web/sdk/admin/views/organizations/details/apis/index.tsx

@@ -5,7 +5,7 @@ import {
   CodeIcon,
   ExclamationTriangleIcon,
 } from "@radix-ui/react-icons";
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { OrganizationContext } from "../contexts/organization-context";
 import { PageTitle } from "~/admin/components/PageTitle";
 import { getColumns } from "./columns";
@@ -69,6 +69,8 @@ const DEFAULT_SORT: DataTableSort = { name: 'createdAt', order: 'desc' };
 const INITIAL_QUERY: DataTableQuery = {
   offset: 0,
   limit: DEFAULT_PAGE_SIZE,
+  // Must match DataTable's mount emit, or it refetches.
+  sort: [DEFAULT_SORT],
 };
 const TRANSFORM_OPTIONS = {
   fieldNameMapping: {
@@ -148,12 +150,17 @@ export function OrganizationApisView() {
     setTableQuery(newQuery);
   };
 
+  // isFetchingNextPage lags a render; the ref doesn't.
+  const isLoadingMoreRef = useRef(false);
   const handleLoadMore = async () => {
+    if (!hasNextPage || isFetchingNextPage || isLoadingMoreRef.current) return;
+    isLoadingMoreRef.current = true;
     try {
-      if (!hasNextPage) return;
       await fetchNextPage();
     } catch (error) {
       console.error("Error loading more service users:", error);
+    } finally {
+      isLoadingMoreRef.current = false;
     }
   };
 

web/sdk/admin/views/organizations/details/contexts/organization-context.tsx

@@ -3,7 +3,6 @@ import {
   OrganizationSchema,
   type Role,
   type BillingAccount,
-  type User,
   type OrganizationKyc,
   type BillingAccountDetails,
 } from "@raystack/proton/frontier";
@@ -29,8 +28,6 @@ interface OrganizationContextType {
   tokenBalance: string;
   isTokenBalanceLoading: boolean;
   fetchTokenBalance: () => void;
-  orgMembersMap: Record<string, User>;
-  isOrgMembersMapLoading: boolean;
   updateKYCDetails: (kycDetails: OrganizationKyc | undefined) => void;
   kycDetails?: OrganizationKyc;
   isKYCLoading: boolean;
@@ -55,8 +52,6 @@ const defaultOrganiztionContextValue = {
     query: "",
     onChange: () => {},
   },
-  orgMembersMap: {},
-  isOrgMembersMapLoading: false,
   updateKYCDetails: () => {},
   kycDetails: undefined,
   isKYCLoading: false,

web/sdk/admin/views/organizations/details/edit/billing.tsx

@@ -126,6 +126,7 @@ export function EditBillingPanel({ open = false, onClose }: EditBillingPanelProp
   );
 
   const onSubmit = async (data: BillingDetailsForm) => {
+    if (!organizationId || !billingId) return;
     try {
       // For prepaid, set values to 0; for postpaid, use form values
       const creditMinValue = data.tokenPaymentType === "prepaid" ? 0n : BigInt(data.creditMin);

web/sdk/admin/views/organizations/details/index.tsx

@@ -16,7 +16,6 @@ import {
   GetBillingBalanceRequestSchema,
   GetOrganizationKycResponseSchema,
   type Organization,
-  type User,
 } from "@raystack/proton/frontier";
 
 export type OrganizationDetailsViewProps = {
@@ -118,41 +117,19 @@ export const OrganizationDetailsView = ({
     { enabled: !!organizationId },
   );
 
-  // Fetch organization members
   const {
-    data: orgMembersMap = {},
-    isLoading: isOrgMembersMapLoading,
-    error: orgMembersError,
+    data: firstBillingAccountId = "",
+    isLoading: isBillingAccountsLoading,
+    error: billingAccountsError,
   } = useQuery(
-    FrontierServiceQueries.listOrganizationUsers,
-    { id: organizationId || "" },
+    FrontierServiceQueries.listBillingAccounts,
+    { orgId: organizationId || "" },
     {
       enabled: !!organizationId,
-      select: (data) => {
-        const users = data?.users || [];
-        return users.reduce(
-          (acc, user) => {
-            const id = user.id || "";
-            acc[id] = user;
-            return acc;
-          },
-          {} as Record<string, User>,
-        );
-      },
+      select: (data) => data?.billingAccounts?.[0]?.id || "",
     },
   );
 
-  // Fetch billing accounts list
-  const { data: firstBillingAccountId = "", error: billingAccountsError } =
-    useQuery(
-      FrontierServiceQueries.listBillingAccounts,
-      { orgId: organizationId || "" },
-      {
-        enabled: !!organizationId,
-        select: (data) => data?.billingAccounts?.[0]?.id || "",
-      },
-    );
-
   // Fetch billing account details
   const {
     data: billingAccountData,
@@ -177,6 +154,9 @@ export const OrganizationDetailsView = ({
   const billingAccount = billingAccountData?.billingAccount;
   const billingAccountDetails = billingAccountData?.billingAccountDetails;
 
+  // getBillingAccount is disabled until the list yields an id.
+  const isBillingLoading = isBillingAccountsLoading || isBillingAccountLoading;
+
   // Fetch billing balance
   const {
     data: tokenBalance = "0",
@@ -202,9 +182,6 @@ export const OrganizationDetailsView = ({
     if (kycError) {
       console.error("Failed to fetch KYC details:", kycError);
     }
-    if (orgMembersError) {
-      console.error("Failed to fetch organization members:", orgMembersError);
-    }
     if (billingAccountsError) {
       console.error("Failed to fetch billing accounts:", billingAccountsError);
     }
@@ -220,14 +197,13 @@ export const OrganizationDetailsView = ({
   }, [
     organizationError,
     kycError,
-    orgMembersError,
     billingAccountsError,
     billingAccountError,
     tokenBalanceError,
   ]);
 
-  const isLoading =
-    isOrganizationLoading || isRolesLoading || isBillingAccountLoading;
+  // Billing waits on an id, so including it here remounted the tab mid-load.
+  const isLoading = isOrganizationLoading || isRolesLoading;
   return (
     <OrganizationContext.Provider
       value={{
@@ -236,13 +212,11 @@ export const OrganizationDetailsView = ({
         roles,
         billingAccount,
         billingAccountDetails,
-        isBillingAccountLoading,
+        isBillingAccountLoading: isBillingLoading,
         fetchBillingAccountDetails,
         tokenBalance,
-        isTokenBalanceLoading,
+        isTokenBalanceLoading: isBillingAccountsLoading || isTokenBalanceLoading,
         fetchTokenBalance,
-        orgMembersMap,
-        isOrgMembersMapLoading,
         updateKYCDetails,
         kycDetails,
         isKYCLoading,

web/sdk/admin/views/organizations/details/invoices/index.tsx

@@ -3,7 +3,7 @@ import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
 import styles from "./invoices.module.css";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { BanknotesIcon } from "~/admin/assets/icons/BanknotesIcon";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { OrganizationContext } from "../contexts/organization-context";
 import { PageTitle } from "~/admin/components/PageTitle";
 import { getColumns } from "./columns";
@@ -22,6 +22,8 @@ const DEFAULT_SORT: DataTableSort = { name: 'createdAt', order: 'desc' };
 const INITIAL_QUERY: DataTableQuery = {
   offset: 0,
   limit: DEFAULT_PAGE_SIZE,
+  // Must match DataTable's mount emit, or it refetches.
+  sort: [DEFAULT_SORT],
 };
 const TRANSFORM_OPTIONS = {
   fieldNameMapping: {
@@ -172,9 +174,15 @@ export function OrganizationInvoicesView() {
     setTableQuery(newQuery);
   };
 
+  // isFetchingNextPage lags a render; the ref doesn't.
+  const isLoadingMoreRef = useRef(false);
   const fetchMore = async () => {
-    if (hasNextPage && !isFetchingNextPage && !isError) {
+    if (!hasNextPage || isFetchingNextPage || isError || isLoadingMoreRef.current) return;
+    isLoadingMoreRef.current = true;
+    try {
       await fetchNextPage();
+    } finally {
+      isLoadingMoreRef.current = false;
     }
   };