Refactor useSupabase hook to be idiomatic (#2017)

src/atoms/supabaseAtoms.ts

 import { atom } from "jotai";
-import {
-  SupabaseBranch,
-  SupabaseOrganizationInfo,
-  SupabaseProject,
-} from "@/ipc/ipc_types";
-
-// Define atom for storing the list of connected Supabase organizations
-export const supabaseOrganizationsAtom = atom<SupabaseOrganizationInfo[]>([]);
-
-// Define atom for storing the list of Supabase projects
-export const supabaseProjectsAtom = atom<SupabaseProject[]>([]);
-export const supabaseBranchesAtom = atom<SupabaseBranch[]>([]);
-
-// Define atom for tracking loading state
-export const supabaseLoadingAtom = atom<boolean>(false);
-
-// Define atom for storing any error that occurs during loading
-export const supabaseErrorAtom = atom<Error | null>(null);
-
-// Define atom for storing the currently selected Supabase project
-export const selectedSupabaseProjectAtom = atom<string | null>(null);
 
 // Define atom for tracking the last log timestamp per project (for incremental log loading)
 export const lastLogTimestampAtom = atom<Record<string, number>>({});

src/components/SupabaseConnector.tsx

@@ -47,46 +47,44 @@ export function SupabaseConnector({ appId }: { appId: number }) {
   const { app, refreshApp } = useLoadApp(appId);
   const { lastDeepLink, clearLastDeepLink } = useDeepLink();
   const { isDarkMode } = useTheme();
+
+  // Check if there are any connected organizations
+  const isConnected = isSupabaseConnected(settings);
+
+  const branchesProjectId =
+    app?.supabaseParentProjectId || app?.supabaseProjectId;
+
+  const {
+    organizations,
+    projects,
+    branches,
+    isLoadingProjects,
+    isFetchingProjects,
+    projectsError,
+    isLoadingBranches,
+    isSettingAppProject,
+    refetchOrganizations,
+    refetchProjects,
+    deleteOrganization,
+    setAppProject,
+    unsetAppProject,
+  } = useSupabase({
+    branchesProjectId,
+    branchesOrganizationSlug: app?.supabaseOrganizationSlug,
+  });
+
   useEffect(() => {
     const handleDeepLink = async () => {
       if (lastDeepLink?.type === "supabase-oauth-return") {
         await refreshSettings();
-        await loadOrganizations();
-        await loadProjects();
+        await refetchOrganizations();
+        await refetchProjects();
         await refreshApp();
         clearLastDeepLink();
       }
     };
     handleDeepLink();
   }, [lastDeepLink?.timestamp]);
-  const {
-    organizations,
-    projects,
-    loading,
-    error,
-    loadOrganizations,
-    deleteOrganization,
-    loadProjects,
-    branches,
-    loadBranches,
-    setAppProject,
-    unsetAppProject,
-  } = useSupabase();
-
-  // Check if there are any connected organizations
-  const isConnected = isSupabaseConnected(settings);
-
-  useEffect(() => {
-    // Load organizations and projects when the component mounts
-    loadOrganizations();
-  }, [loadOrganizations]);
-
-  useEffect(() => {
-    // Load projects when organizations are available
-    if (isConnected) {
-      loadProjects();
-    }
-  }, [isConnected, loadProjects]);
 
   const handleProjectSelect = async (projectValue: string) => {
     try {
@@ -145,17 +143,6 @@ export function SupabaseConnector({ appId }: { appId: number }) {
     }
   };
 
-  const projectIdForBranches =
-    app?.supabaseParentProjectId || app?.supabaseProjectId;
-  useEffect(() => {
-    if (projectIdForBranches) {
-      loadBranches(
-        projectIdForBranches,
-        app?.supabaseOrganizationSlug ?? undefined,
-      );
-    }
-  }, [projectIdForBranches, loadBranches, app?.supabaseOrganizationSlug]);
-
   const handleUnsetProject = async () => {
     try {
       await unsetAppProject(appId);
@@ -171,7 +158,6 @@ export function SupabaseConnector({ appId }: { appId: number }) {
     try {
       await deleteOrganization({ organizationSlug });
       toast.success("Organization disconnected successfully");
-      await loadProjects();
     } catch (error) {
       toast.error("Failed to disconnect organization: " + error);
     }
@@ -242,7 +228,7 @@ export function SupabaseConnector({ appId }: { appId: number }) {
                     toast.error("Failed to set branch: " + error);
                   }
                 }}
-                disabled={loading}
+                disabled={isLoadingBranches || isSettingAppProject}
               >
                 <SelectTrigger
                   id="supabase-branch-select"
@@ -301,18 +287,18 @@ export function SupabaseConnector({ appId }: { appId: number }) {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          {loading ? (
+          {isLoadingProjects || isFetchingProjects ? (
             <div className="space-y-2">
               <Skeleton className="h-4 w-full" />
               <Skeleton className="h-10 w-full" />
             </div>
-          ) : error ? (
+          ) : projectsError ? (
             <div className="text-red-500">
-              Error loading projects: {error.message}
+              Error loading projects: {projectsError.message}
               <Button
                 variant="outline"
                 className="mt-2"
-                onClick={() => loadProjects()}
+                onClick={() => refetchProjects()}
               >
                 Retry
               </Button>

src/components/SupabaseIntegration.tsx

-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
@@ -12,13 +12,13 @@ import { isSupabaseConnected } from "@/lib/schemas";
 
 export function SupabaseIntegration() {
   const { settings, updateSettings } = useSettings();
-  const { organizations, loadOrganizations, deleteOrganization } =
-    useSupabase();
   const [isDisconnecting, setIsDisconnecting] = useState(false);
 
-  useEffect(() => {
-    loadOrganizations();
-  }, [loadOrganizations]);
+  // Check if there are any connected organizations
+  const isConnected = isSupabaseConnected(settings);
+
+  const { organizations, refetchOrganizations, deleteOrganization } =
+    useSupabase();
 
   const handleDisconnectAllFromSupabase = async () => {
     setIsDisconnecting(true);
@@ -31,7 +31,7 @@ export function SupabaseIntegration() {
       });
       if (result) {
         showSuccess("Successfully disconnected all Supabase organizations");
-        await loadOrganizations();
+        await refetchOrganizations();
       } else {
         showError("Failed to disconnect from Supabase");
       }
@@ -64,9 +64,6 @@ export function SupabaseIntegration() {
     }
   };
 
-  // Check if there are any connected organizations
-  const isConnected = isSupabaseConnected(settings);
-
   if (!isConnected) {
     return null;
   }

src/components/preview_panel/PreviewPanel.tsx

@@ -117,13 +117,13 @@ export function PreviewPanel() {
     if (!projectId) return;
 
     // Load logs immediately
-    loadEdgeLogs(projectId, organizationSlug).catch((error) => {
+    loadEdgeLogs({ projectId, organizationSlug }).catch((error) => {
       console.error("Failed to load edge logs:", error);
     });
 
     // Poll for new logs every 5 seconds
     const intervalId = setInterval(() => {
-      loadEdgeLogs(projectId, organizationSlug).catch((error) => {
+      loadEdgeLogs({ projectId, organizationSlug }).catch((error) => {
         console.error("Failed to load edge logs:", error);
       });
     }, 5000);

src/hooks/useSupabase.ts

-import { useCallback } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import {
-  supabaseOrganizationsAtom,
-  supabaseProjectsAtom,
-  supabaseBranchesAtom,
-  supabaseLoadingAtom,
-  supabaseErrorAtom,
-  selectedSupabaseProjectAtom,
-  lastLogTimestampAtom,
-} from "@/atoms/supabaseAtoms";
+import { lastLogTimestampAtom } from "@/atoms/supabaseAtoms";
 import { appConsoleEntriesAtom, selectedAppIdAtom } from "@/atoms/appAtoms";
 import { IpcClient } from "@/ipc/ipc_client";
 import {
   SetSupabaseAppProjectParams,
   DeleteSupabaseOrganizationParams,
+  SupabaseOrganizationInfo,
+  SupabaseProject,
+  SupabaseBranch,
 } from "@/ipc/ipc_types";
+import { useSettings } from "./useSettings";
+import { isSupabaseConnected } from "@/lib/schemas";
+
+const SUPABASE_QUERY_KEYS = {
+  organizations: ["supabase", "organizations"] as const,
+  projects: ["supabase", "projects"] as const,
+  branches: (projectId: string) => ["supabase", "branches", projectId] as const,
+};
+
+export interface UseSupabaseOptions {
+  branchesProjectId?: string | null;
+  branchesOrganizationSlug?: string | null;
+}
+
+export function useSupabase(options: UseSupabaseOptions = {}) {
+  const { branchesProjectId, branchesOrganizationSlug } = options;
+  const queryClient = useQueryClient();
+  const { settings } = useSettings();
+  const isConnected = isSupabaseConnected(settings);
 
-export function useSupabase() {
-  const [organizations, setOrganizations] = useAtom(supabaseOrganizationsAtom);
-  const [projects, setProjects] = useAtom(supabaseProjectsAtom);
-  const [branches, setBranches] = useAtom(supabaseBranchesAtom);
-  const [loading, setLoading] = useAtom(supabaseLoadingAtom);
-  const [error, setError] = useAtom(supabaseErrorAtom);
-  const [selectedProject, setSelectedProject] = useAtom(
-    selectedSupabaseProjectAtom,
-  );
   const setConsoleEntries = useSetAtom(appConsoleEntriesAtom);
   const selectedAppId = useAtomValue(selectedAppIdAtom);
   const [lastLogTimestamp, setLastLogTimestamp] = useAtom(lastLogTimestampAtom);
 
+  // Query: Load all connected Supabase organizations
+  // Only runs when Supabase is connected to avoid unnecessary API calls
+  const organizationsQuery = useQuery<SupabaseOrganizationInfo[], Error>({
+    queryKey: SUPABASE_QUERY_KEYS.organizations,
+    queryFn: async () => {
       const ipcClient = IpcClient.getInstance();
+      return ipcClient.listSupabaseOrganizations();
+    },
+    enabled: isConnected,
+    meta: { showErrorToast: true },
+  });
 
-  /**
-   * Load all connected Supabase organizations
-   */
-  const loadOrganizations = useCallback(async () => {
-    setLoading(true);
-    try {
-      const orgList = await ipcClient.listSupabaseOrganizations();
-      setOrganizations(orgList);
-      setError(null);
-    } catch (error) {
-      console.error("Error loading Supabase organizations:", error);
-      setError(error instanceof Error ? error : new Error(String(error)));
-    } finally {
-      setLoading(false);
-    }
-  }, [ipcClient, setOrganizations, setError, setLoading]);
-
-  /**
-   * Delete a Supabase organization connection
-   */
-  const deleteOrganization = useCallback(
-    async (params: DeleteSupabaseOrganizationParams) => {
-      setLoading(true);
-      try {
-        await ipcClient.deleteSupabaseOrganization(params);
-        // Refresh organizations list after deletion
-        const orgList = await ipcClient.listSupabaseOrganizations();
-        setOrganizations(orgList);
-        setError(null);
-      } catch (error) {
-        console.error("Error deleting Supabase organization:", error);
-        setError(error instanceof Error ? error : new Error(String(error)));
-        throw error;
-      } finally {
-        setLoading(false);
-      }
+  // Query: Load Supabase projects from all connected organizations
+  // Only runs when there are connected organizations to avoid unauthorized errors
+  const projectsQuery = useQuery<SupabaseProject[], Error>({
+    queryKey: SUPABASE_QUERY_KEYS.projects,
+    queryFn: async () => {
+      const ipcClient = IpcClient.getInstance();
+      return ipcClient.listAllSupabaseProjects();
     },
-    [ipcClient, setOrganizations, setError, setLoading],
-  );
+    enabled: (organizationsQuery.data?.length ?? 0) > 0,
+    meta: { showErrorToast: true },
+  });
 
-  /**
-   * Load Supabase projects from all connected organizations
-   */
-  const loadProjects = useCallback(async () => {
-    setLoading(true);
-    try {
-      const projectList = await ipcClient.listAllSupabaseProjects();
-      setProjects(projectList);
-      setError(null);
-    } catch (error) {
-      console.error("Error loading Supabase projects:", error);
-      setError(error instanceof Error ? error : new Error(String(error)));
-    } finally {
-      setLoading(false);
-    }
-  }, [ipcClient, setProjects, setError, setLoading]);
-
-  /**
-   * Load branches for a Supabase project
-   */
-  const loadBranches = useCallback(
-    async (projectId: string, organizationSlug?: string) => {
-      setLoading(true);
-      try {
-        const list = await ipcClient.listSupabaseBranches({
-          projectId,
-          organizationSlug: organizationSlug ?? null,
+  // Mutation: Delete a Supabase organization connection
+  const deleteOrganizationMutation = useMutation<
+    void,
+    Error,
+    DeleteSupabaseOrganizationParams
+  >({
+    mutationFn: async (params) => {
+      const ipcClient = IpcClient.getInstance();
+      await ipcClient.deleteSupabaseOrganization(params);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: SUPABASE_QUERY_KEYS.organizations,
       });
-        setBranches(Array.isArray(list) ? list : []);
-        setError(null);
-      } catch (error) {
-        console.error("Error loading Supabase branches:", error);
-        setError(error instanceof Error ? error : new Error(String(error)));
-      } finally {
-        setLoading(false);
-      }
+      queryClient.invalidateQueries({ queryKey: SUPABASE_QUERY_KEYS.projects });
     },
-    [ipcClient, setBranches, setError, setLoading],
-  );
+    meta: { showErrorToast: true },
+  });
 
-  /**
-   * Associate a Supabase project with an app
-   */
-  const setAppProject = useCallback(
-    async (params: SetSupabaseAppProjectParams) => {
-      setLoading(true);
-      try {
+  // Mutation: Associate a Supabase project with an app
+  const setAppProjectMutation = useMutation<
+    void,
+    Error,
+    SetSupabaseAppProjectParams
+  >({
+    mutationFn: async (params) => {
+      const ipcClient = IpcClient.getInstance();
       await ipcClient.setSupabaseAppProject(params);
-        setError(null);
-      } catch (error) {
-        console.error("Error setting Supabase project for app:", error);
-        setError(error instanceof Error ? error : new Error(String(error)));
-        throw error;
-      } finally {
-        setLoading(false);
-      }
     },
-    [ipcClient, setError, setLoading],
-  );
+    meta: { showErrorToast: true },
+  });
 
-  /**
-   * Remove a Supabase project association from an app
-   */
-  const unsetAppProject = useCallback(
-    async (appId: number) => {
-      setLoading(true);
-      try {
+  // Mutation: Remove a Supabase project association from an app
+  const unsetAppProjectMutation = useMutation<void, Error, number>({
+    mutationFn: async (appId) => {
+      const ipcClient = IpcClient.getInstance();
       await ipcClient.unsetSupabaseAppProject(appId);
-        setError(null);
-      } catch (error) {
-        console.error("Error unsetting Supabase project for app:", error);
-        setError(error instanceof Error ? error : new Error(String(error)));
-        throw error;
-      } finally {
-        setLoading(false);
-      }
     },
-    [ipcClient, setError, setLoading],
-  );
+    meta: { showErrorToast: true },
+  });
 
-  /**
-   * Load edge function logs for a Supabase project
-   * Uses timestamp tracking to only fetch new logs on subsequent calls
-   */
-  const loadEdgeLogs = useCallback(
-    async (projectId: string, organizationSlug?: string) => {
+  // Query: Load branches for a Supabase project
+  const branchesQuery = useQuery<SupabaseBranch[], Error>({
+    queryKey: [
+      ...SUPABASE_QUERY_KEYS.branches(branchesProjectId ?? ""),
+      branchesOrganizationSlug ?? null,
+    ],
+    queryFn: async () => {
+      const ipcClient = IpcClient.getInstance();
+      const list = await ipcClient.listSupabaseBranches({
+        projectId: branchesProjectId!,
+        organizationSlug: branchesOrganizationSlug ?? null,
+      });
+      return Array.isArray(list) ? list : [];
+    },
+    enabled: !!branchesProjectId,
+    meta: { showErrorToast: true },
+  });
+
+  // Mutation: Load edge function logs for a Supabase project
+  // Using mutation because it has side effects (updating console entries)
+  const loadEdgeLogsMutation = useMutation<
+    void,
+    Error,
+    { projectId: string; organizationSlug?: string }
+  >({
+    mutationFn: async ({ projectId, organizationSlug }) => {
       if (!selectedAppId) return;
 
+      const ipcClient = IpcClient.getInstance();
+
       // Use last timestamp if available, otherwise fetch logs from the past 10 minutes
       const lastTimestamp = lastLogTimestamp[projectId];
-      const timestampStart = lastTimestamp ?? Date.now() - 10 * 60 * 1000; // 10 minutes ago
+      const timestampStart = lastTimestamp ?? Date.now() - 10 * 60 * 1000;
 
-      setLoading(true);
-      try {
-        // Fetch logs - handler returns ConsoleEntry[] already formatted
       const logs = await ipcClient.getSupabaseEdgeLogs({
         projectId,
         timestampStart,
@@ -181,7 +148,6 @@ export function useSupabase() {
             [projectId]: Date.now(),
           }));
         }
-          setError(null);
         return;
       }
 
@@ -196,50 +162,43 @@ export function useSupabase() {
         ...prev,
         [projectId]: latestLog.timestamp,
       }));
-
-        setError(null);
-      } catch (error) {
-        console.error("Error loading Supabase edge logs:", error);
-        setError(error instanceof Error ? error : new Error(String(error)));
-      } finally {
-        setLoading(false);
-      }
     },
-    [
-      ipcClient,
-      setConsoleEntries,
-      setError,
-      setLoading,
-      selectedAppId,
-      lastLogTimestamp,
-      setLastLogTimestamp,
-    ],
-  );
-
-  /**
-   * Select a project for current use
-   */
-  const selectProject = useCallback(
-    (projectId: string | null) => {
-      setSelectedProject(projectId);
-    },
-    [setSelectedProject],
-  );
+  });
 
   return {
-    organizations,
-    projects,
-    branches,
-    loading,
-    error,
-    selectedProject,
-    loadOrganizations,
-    deleteOrganization,
-    loadProjects,
-    loadBranches,
-    loadEdgeLogs,
-    setAppProject,
-    unsetAppProject,
-    selectProject,
+    // Data
+    organizations: organizationsQuery.data ?? [],
+    projects: projectsQuery.data ?? [],
+    branches: branchesQuery.data ?? [],
+
+    // Organizations query state
+    isLoadingOrganizations: organizationsQuery.isLoading,
+    isFetchingOrganizations: organizationsQuery.isFetching,
+    organizationsError: organizationsQuery.error,
+
+    // Projects query state
+    isLoadingProjects: projectsQuery.isLoading,
+    isFetchingProjects: projectsQuery.isFetching,
+    projectsError: projectsQuery.error,
+
+    // Branches query state
+    isLoadingBranches: branchesQuery.isLoading,
+    isFetchingBranches: branchesQuery.isFetching,
+    branchesError: branchesQuery.error,
+
+    // Mutation states
+    isDeletingOrganization: deleteOrganizationMutation.isPending,
+    isSettingAppProject: setAppProjectMutation.isPending,
+    isUnsettingAppProject: unsetAppProjectMutation.isPending,
+    isLoadingEdgeLogs: loadEdgeLogsMutation.isPending,
+
+    // Actions
+    refetchOrganizations: organizationsQuery.refetch,
+    refetchProjects: projectsQuery.refetch,
+    refetchBranches: branchesQuery.refetch,
+    deleteOrganization: deleteOrganizationMutation.mutateAsync,
+    loadEdgeLogs: loadEdgeLogsMutation.mutateAsync,
+    setAppProject: setAppProjectMutation.mutateAsync,
+    unsetAppProject: unsetAppProjectMutation.mutateAsync,
   };
 }