Eliminate N+1 API calls in ProjectSwitcher by deriving projects from @me response

Author: charlesvien

apps/twig/src/renderer/features/auth/stores/authStore.ts

@@ -177,6 +177,7 @@ export const useAuthStore = create<AuthState>()(
 
             // Clear any cached data from previous sessions AFTER setting new auth
             queryClient.clear();
+            queryClient.setQueryData(["currentUser"], user);
 
             get().scheduleTokenRefresh();
 
@@ -470,6 +471,8 @@ export const useAuthStore = create<AuthState>()(
                   needsProjectSelection: false,
                 });
 
+                queryClient.setQueryData(["currentUser"], user);
+
                 updateServiceTokens(currentTokens.accessToken);
 
                 get().scheduleTokenRefresh();
@@ -596,6 +599,7 @@ export const useAuthStore = create<AuthState>()(
             updateServiceTokens(tokenResponse.access_token);
 
             queryClient.clear();
+            queryClient.setQueryData(["currentUser"], user);
 
             get().scheduleTokenRefresh();
 

apps/twig/src/renderer/features/projects/hooks/useProjects.tsx

@@ -1,5 +1,6 @@
 import { useAuthStore } from "@features/auth/stores/authStore";
 import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
 
 export interface ProjectInfo {
   id: number;
@@ -36,27 +37,52 @@ export function useProjects() {
   const client = useAuthStore((s) => s.client);
   const currentProjectId = useAuthStore((s) => s.projectId);
 
-  const query = useQuery({
-    queryKey: ["projects", availableProjectIds],
-    queryFn: async () => {
-      if (!client || availableProjectIds.length === 0) {
-        return [];
-      }
-      return client.getProjectDetails(availableProjectIds);
-    },
-    enabled: !!client && availableProjectIds.length > 0,
-    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+  const {
+    data: currentUser,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["currentUser"],
+    queryFn: () => client?.getCurrentUser(),
+    enabled: !!client,
+    staleTime: 5 * 60 * 1000,
   });
 
-  const currentProject = query.data?.find((p) => p.id === currentProjectId);
-  const groupedProjects = query.data ? groupProjectsByOrg(query.data) : [];
+  const projects = useMemo(() => {
+    if (!currentUser?.organization) return [];
+
+    const teams = (currentUser.organization.teams ?? []) as Array<{
+      id: number;
+      name?: string;
+    }>;
+    const orgName = currentUser.organization.name ?? "Unknown Organization";
+    const orgId = currentUser.organization.id ?? "";
+
+    const teamMap = new Map(teams.map((t) => [t.id, t]));
+
+    return availableProjectIds
+      .map((id) => {
+        const team = teamMap.get(id);
+        if (!team) return null;
+        return {
+          id,
+          name: team.name ?? `Project ${id}`,
+          organization: { id: orgId, name: orgName },
+        };
+      })
+      .filter((p): p is ProjectInfo => p !== null);
+  }, [currentUser, availableProjectIds]);
+
+  const currentProject = projects.find((p) => p.id === currentProjectId);
+  const groupedProjects = groupProjectsByOrg(projects);
 
   return {
-    projects: query.data ?? [],
+    projects,
     groupedProjects,
     currentProject,
     currentProjectId,
-    isLoading: query.isLoading,
-    error: query.error,
+    currentUser: currentUser ?? null,
+    isLoading,
+    error,
   };
 }

apps/twig/src/renderer/features/sidebar/components/ProjectSwitcher.tsx

@@ -27,7 +27,6 @@ import {
 } from "@radix-ui/themes";
 import { trpcVanilla } from "@renderer/trpc/client";
 import { getCloudUrlFromRegion } from "@shared/constants/oauth";
-import { useQuery } from "@tanstack/react-query";
 import { isMac } from "@utils/platform";
 import { useCallback, useEffect, useRef, useState } from "react";
 import "./ProjectSwitcher.css";
@@ -56,15 +55,13 @@ export function ProjectSwitcher() {
   const cloudRegion = useAuthStore((s) => s.cloudRegion);
   const selectProject = useAuthStore((s) => s.selectProject);
   const logout = useAuthStore((s) => s.logout);
-  const client = useAuthStore((s) => s.client);
-  const { groupedProjects, currentProject, currentProjectId, isLoading } =
-    useProjects();
-
-  const { data: currentUser } = useQuery({
-    queryKey: ["currentUser"],
-    queryFn: () => client?.getCurrentUser(),
-    enabled: !!client,
-  });
+  const {
+    groupedProjects,
+    currentProject,
+    currentProjectId,
+    currentUser,
+    isLoading,
+  } = useProjects();
 
   const handleProjectSelect = (projectId: number) => {
     if (projectId !== currentProjectId) {