refactor: migrate hooks to React Query for data fetching (#2536)

e2e-tests/favorite_app.spec.ts

-import { test } from "./helpers/test_helper";
+import { test, Timeout } from "./helpers/test_helper";
 import { expect } from "@playwright/test";
 
 test.describe("Favorite App Tests", () => {
@@ -20,16 +20,22 @@ test.describe("Favorite App Tests", () => {
     const appItem = po.page.locator(`[data-testid="app-list-item-${appName}"]`);
     await expect(appItem).toBeVisible();
 
-    // Click the favorite button
+    // Click the favorite button — hover first like a real user would,
+    // then wait for the app to finish starting before the click resolves.
     const favoriteButton = appItem
       .locator("xpath=..")
       .locator('[data-testid="favorite-button"]');
     await expect(favoriteButton).toBeVisible();
+    await appItem.hover();
     await favoriteButton.click();
 
-    // Check that the star is filled (favorited)
+    // Check that the star is filled (favorited).
+    // Use a longer timeout because the addToFavorite IPC call may be waiting
+    // for the app startup lock to release.
     const star = favoriteButton.locator("svg");
-    await expect(star).toHaveClass(/(?:^|\s)fill-\[#6c55dc\]/);
+    await expect(star).toHaveClass(/(?:^|\s)fill-\[#6c55dc\]/, {
+      timeout: Timeout.MEDIUM,
+    });
   });
 
   test("Remove app from favorite", async ({ po }) => {
@@ -53,21 +59,27 @@ test.describe("Favorite App Tests", () => {
     const favoriteButton = appItem
       .locator("xpath=..")
       .locator('[data-testid="favorite-button"]');
+    await appItem.hover();
     await favoriteButton.click();
 
     // Check that the star is filled (favorited)
     const star = favoriteButton.locator("svg");
-    await expect(star).toHaveClass(/(?:^|\s)fill-\[#6c55dc\]/);
+    await expect(star).toHaveClass(/(?:^|\s)fill-\[#6c55dc\]/, {
+      timeout: Timeout.MEDIUM,
+    });
 
     // Now, remove from favorite
     const unfavoriteButton = appItem
       .locator("xpath=..")
       .locator('[data-testid="favorite-button"]');
     await expect(unfavoriteButton).toBeVisible();
+    await appItem.hover();
     await unfavoriteButton.click();
 
     // Check that the star is not filled (unfavorited)
     // Match fill-[#6c55dc] only at start or after whitespace (not as part of hover:fill-...)
-    await expect(star).not.toHaveClass(/(?:^|\s)fill-\[#6c55dc\]/);
+    await expect(star).not.toHaveClass(/(?:^|\s)fill-\[#6c55dc\]/, {
+      timeout: Timeout.MEDIUM,
+    });
   });
 });

src/app/TitleBar.tsx

@@ -13,6 +13,7 @@ import { useEffect, useState } from "react";
 import { DyadProSuccessDialog } from "@/components/DyadProSuccessDialog";
 import { useTheme } from "@/contexts/ThemeContext";
 import { ipc } from "@/ipc/types";
+import { useSystemPlatform } from "@/hooks/useSystemPlatform";
 import { useUserBudgetInfo } from "@/hooks/useUserBudgetInfo";
 import type { UserBudgetInfo } from "@/ipc/types";
 import {
@@ -29,21 +30,8 @@ export const TitleBar = () => {
   const location = useLocation();
   const { settings, refreshSettings } = useSettings();
   const [isSuccessDialogOpen, setIsSuccessDialogOpen] = useState(false);
-  const [showWindowControls, setShowWindowControls] = useState(false);
-
-  useEffect(() => {
-    // Check if we're running on Windows
-    const checkPlatform = async () => {
-      try {
-        const platform = await ipc.system.getSystemPlatform();
-        setShowWindowControls(platform !== "darwin");
-      } catch (error) {
-        console.error("Failed to get platform info:", error);
-      }
-    };
-
-    checkPlatform();
-  }, []);
+  const platform = useSystemPlatform();
+  const showWindowControls = platform !== null && platform !== "darwin";
 
   const showDyadProSuccessDialog = () => {
     setIsSuccessDialogOpen(true);

src/atoms/appAtoms.ts

 import { atom } from "jotai";
 import type { App, Version, ConsoleEntry } from "@/ipc/types";
-import type { ListedApp } from "@/ipc/types/app";
 import type { UserSettings } from "@/lib/schemas";
 
 export const currentAppAtom = atom<App | null>(null);
 export const selectedAppIdAtom = atom<number | null>(null);
-export const appsListAtom = atom<ListedApp[]>([]);
 export const versionsListAtom = atom<Version[]>([]);
 export const previewModeAtom = atom<
   | "preview"

src/components/ImportAppDialog.tsx

@@ -20,6 +20,7 @@ import { Label } from "@/components/ui/label";
 import { useNavigate } from "@tanstack/react-router";
 import { useStreamChat } from "@/hooks/useStreamChat";
 import type { GithubRepository } from "@/ipc/types";
+import { useGithubRepos } from "@/hooks/useGithubRepos";
 
 import { selectedAppIdAtom } from "@/atoms/appAtoms";
 import { useSetAtom } from "jotai";
@@ -54,12 +55,13 @@ export function ImportAppDialog({ isOpen, onClose }: ImportAppDialogProps) {
   const { refreshApps } = useLoadApps();
   const setSelectedAppId = useSetAtom(selectedAppIdAtom);
   // GitHub import state
-  const [repos, setRepos] = useState<GithubRepository[]>([]);
-  const [loading, setLoading] = useState(false);
   const [url, setUrl] = useState("");
   const [importing, setImporting] = useState(false);
   const { settings, refreshSettings } = useSettings();
   const isAuthenticated = !!settings?.githubAccessToken;
+  const { repos, loading } = useGithubRepos({
+    enabled: isOpen && isAuthenticated,
+  });
 
   const [githubAppName, setGithubAppName] = useState("");
   const [githubNameExists, setGithubNameExists] = useState(false);
@@ -68,12 +70,8 @@ export function ImportAppDialog({ isOpen, onClose }: ImportAppDialogProps) {
     if (isOpen) {
       setGithubAppName("");
       setGithubNameExists(false);
-      // Fetch GitHub repos if authenticated
-      if (isAuthenticated) {
-        fetchRepos();
-      }
     }
-  }, [isOpen, isAuthenticated]);
+  }, [isOpen]);
 
   // Re-check app name when copyToDyadApps changes
   useEffect(() => {
@@ -82,17 +80,6 @@ export function ImportAppDialog({ isOpen, onClose }: ImportAppDialogProps) {
     }
   }, [copyToDyadApps]);
 
-  const fetchRepos = async () => {
-    setLoading(true);
-    try {
-      const fetchedRepos = await ipc.github.listRepos();
-      setRepos(fetchedRepos);
-    } catch (err: unknown) {
-      showError("Failed to fetch repositories.: " + (err as any).toString());
-    } finally {
-      setLoading(false);
-    }
-  };
   const handleUrlBlur = async () => {
     if (!url.trim()) return;
     const repoName = extractRepoNameFromUrl(url);

src/hooks/useAddAppToFavorite.ts

-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ipc } from "@/ipc/types";
+import type { ListedApp } from "@/ipc/types/app";
 import { showError, showSuccess } from "@/lib/toast";
-import { useAtom } from "jotai";
-import { appsListAtom } from "@/atoms/appAtoms";
+import { queryKeys } from "@/lib/queryKeys";
 
 export function useAddAppToFavorite() {
-  const [_, setApps] = useAtom(appsListAtom);
+  const queryClient = useQueryClient();
 
   const mutation = useMutation<boolean, Error, number>({
     mutationFn: async (appId: number): Promise<boolean> => {
@@ -13,8 +13,8 @@ export function useAddAppToFavorite() {
       return result.isFavorite;
     },
     onSuccess: (newIsFavorite, appId) => {
-      setApps((currentApps) =>
-        currentApps.map((app) =>
+      queryClient.setQueryData<ListedApp[]>(queryKeys.apps.all, (oldApps) =>
+        oldApps?.map((app) =>
           app.id === appId ? { ...app, isFavorite: newIsFavorite } : app,
         ),
       );

src/hooks/useAppVersion.ts

-import { useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { ipc } from "@/ipc/types";
+import { queryKeys } from "@/lib/queryKeys";
 
 export function useAppVersion() {
-  const [appVersion, setAppVersion] = useState<string | null>(null);
+  const { data } = useQuery({
+    queryKey: queryKeys.system.appVersion,
+    queryFn: async () => {
+      const result = await ipc.system.getAppVersion();
+      return result.version;
+    },
+    staleTime: Infinity, // App version never changes during a session
+  });
 
-  useEffect(() => {
-    const fetchVersion = async () => {
-      try {
-        const result = await ipc.system.getAppVersion();
-        setAppVersion(result.version);
-      } catch {
-        setAppVersion(null);
-      }
-    };
-    fetchVersion();
-  }, []);
-
-  return appVersion;
+  return data ?? null;
 }

src/hooks/useGithubRepos.ts

+import { useQuery } from "@tanstack/react-query";
+import { ipc } from "@/ipc/types";
+import { queryKeys } from "@/lib/queryKeys";
+
+export function useGithubRepos({ enabled }: { enabled: boolean }) {
+  const { data, isLoading, error } = useQuery({
+    queryKey: queryKeys.github.repos,
+    queryFn: () => ipc.github.listRepos(),
+    enabled,
+    meta: { showErrorToast: true },
+  });
+
+  return {
+    repos: data ?? [],
+    loading: isLoading,
+    error,
+  };
+}

src/hooks/useLoadAppFile.ts

-import { useState, useEffect } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { ipc } from "@/ipc/types";
+import { queryKeys } from "@/lib/queryKeys";
 
 export function useLoadAppFile(appId: number | null, filePath: string | null) {
-  const [content, setContent] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    const loadFile = async () => {
-      if (appId === null || filePath === null) {
-        setContent(null);
-        setError(null);
-        return;
-      }
-
-      setLoading(true);
-      try {
-        const fileContent = await ipc.app.readAppFile({ appId, filePath });
-
-        setContent(fileContent);
-        setError(null);
-      } catch (error) {
-        console.error(
-          `Error loading file ${filePath} for app ${appId}:`,
-          error,
-        );
-        setError(error instanceof Error ? error : new Error(String(error)));
-        setContent(null);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadFile();
-  }, [appId, filePath]);
-
-  const refreshFile = async () => {
-    if (appId === null || filePath === null) {
-      return;
-    }
-
-    setLoading(true);
-    try {
-      const fileContent = await ipc.app.readAppFile({ appId, filePath });
-      setContent(fileContent);
-      setError(null);
-    } catch (error) {
-      console.error(
-        `Error refreshing file ${filePath} for app ${appId}:`,
-        error,
-      );
-      setError(error instanceof Error ? error : new Error(String(error)));
-    } finally {
-      setLoading(false);
-    }
+  const queryClient = useQueryClient();
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: queryKeys.appFiles.content({ appId, filePath }),
+    queryFn: async () => {
+      return ipc.app.readAppFile({ appId: appId!, filePath: filePath! });
+    },
+    enabled: appId !== null && filePath !== null,
+  });
+
+  const refreshFile = () => {
+    if (appId === null || filePath === null) return Promise.resolve();
+    return queryClient.invalidateQueries({
+      queryKey: queryKeys.appFiles.content({ appId, filePath }),
+    });
   };
 
-  return { content, loading, error, refreshFile };
+  return {
+    content: data ?? null,
+    loading: isLoading,
+    error: error ?? null,
+    refreshFile,
+  };
 }

src/hooks/useLoadApps.ts

-import { useState, useEffect, useCallback } from "react";
-import { useAtom } from "jotai";
-import { appsListAtom } from "@/atoms/appAtoms";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { ipc } from "@/ipc/types";
+import { queryKeys } from "@/lib/queryKeys";
 
 export function useLoadApps() {
-  const [apps, setApps] = useAtom(appsListAtom);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
+  const queryClient = useQueryClient();
 
-  const refreshApps = useCallback(async () => {
-    setLoading(true);
-    try {
+  const { data, isLoading, error } = useQuery({
+    queryKey: queryKeys.apps.all,
+    queryFn: async () => {
       const appListResponse = await ipc.app.listApps();
-      setApps(appListResponse.apps);
-      setError(null);
-    } catch (error) {
-      console.error("Error refreshing apps:", error);
-      setError(error instanceof Error ? error : new Error(String(error)));
-    } finally {
-      setLoading(false);
-    }
-  }, [setApps, setError, setLoading]);
+      return appListResponse.apps;
+    },
+  });
 
-  useEffect(() => {
-    refreshApps();
-  }, [refreshApps]);
+  const refreshApps = () => {
+    return queryClient.invalidateQueries({ queryKey: queryKeys.apps.all });
+  };
 
-  return { apps, loading, error, refreshApps };
+  return {
+    apps: data ?? [],
+    loading: isLoading,
+    error: error ?? null,
+    refreshApps,
+  };
 }

src/hooks/useSettings.ts

-import { useState, useEffect, useCallback } from "react";
+import { useEffect, useCallback } from "react";
 import { useAtom } from "jotai";
 import { userSettingsAtom, envVarsAtom } from "@/atoms/appAtoms";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { ipc } from "@/ipc/types";
 import { type UserSettings, hasDyadProKey } from "@/lib/schemas";
 import { usePostHog } from "posthog-js/react";
 import { useAppVersion } from "./useAppVersion";
+import { queryKeys } from "@/lib/queryKeys";
 
 const TELEMETRY_CONSENT_KEY = "dyadTelemetryConsent";
 const TELEMETRY_USER_ID_KEY = "dyadTelemetryUserId";
@@ -21,21 +23,28 @@ let isInitialLoad = false;
 
 export function useSettings() {
   const posthog = usePostHog();
-  const [settings, setSettingsAtom] = useAtom(userSettingsAtom);
-  const [envVars, setEnvVarsAtom] = useAtom(envVarsAtom);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
+  const [, setSettingsAtom] = useAtom(userSettingsAtom);
+  const [, setEnvVarsAtom] = useAtom(envVarsAtom);
   const appVersion = useAppVersion();
-  const loadInitialData = useCallback(async () => {
-    setLoading(true);
-    try {
-      // Fetch settings and env vars concurrently
-      const [userSettings, fetchedEnvVars] = await Promise.all([
-        ipc.settings.getUserSettings(),
-        ipc.misc.getEnvVars(),
-      ]);
-      processSettingsForTelemetry(userSettings);
-      const isPro = hasDyadProKey(userSettings);
+  const queryClient = useQueryClient();
+
+  // Query for user settings
+  const settingsQuery = useQuery({
+    queryKey: queryKeys.settings.user,
+    queryFn: () => ipc.settings.getUserSettings(),
+  });
+
+  // Query for env vars
+  const envVarsQuery = useQuery({
+    queryKey: queryKeys.settings.envVars,
+    queryFn: () => ipc.misc.getEnvVars(),
+  });
+
+  // Process telemetry side effects when settings load/change
+  useEffect(() => {
+    if (settingsQuery.data) {
+      processSettingsForTelemetry(settingsQuery.data);
+      const isPro = hasDyadProKey(settingsQuery.data);
       posthog.people.set({ isPro });
       if (!isInitialLoad && appVersion) {
         posthog.capture("app:initial-load", {
@@ -44,51 +53,54 @@ export function useSettings() {
         });
         isInitialLoad = true;
       }
-      setSettingsAtom(userSettings);
-      setEnvVarsAtom(fetchedEnvVars);
-      setError(null);
-    } catch (error) {
-      console.error("Error loading initial data:", error);
-      setError(error instanceof Error ? error : new Error(String(error)));
-    } finally {
-      setLoading(false);
+      setSettingsAtom(settingsQuery.data);
     }
-  }, [setSettingsAtom, setEnvVarsAtom, appVersion]);
+  }, [settingsQuery.data, appVersion, posthog, setSettingsAtom]);
 
+  // Sync env vars to Jotai atom
   useEffect(() => {
-    // Only run once on mount, dependencies are stable getters/setters
-    loadInitialData();
-  }, [loadInitialData]);
+    if (envVarsQuery.data) {
+      setEnvVarsAtom(envVarsQuery.data);
+    }
+  }, [envVarsQuery.data, setEnvVarsAtom]);
 
-  const updateSettings = async (newSettings: Partial<UserSettings>) => {
-    setLoading(true);
-    try {
-      const updatedSettings = await ipc.settings.setUserSettings(newSettings);
-      setSettingsAtom(updatedSettings);
+  // Mutation for updating settings
+  const updateSettingsMutation = useMutation({
+    mutationFn: async (newSettings: Partial<UserSettings>) => {
+      return ipc.settings.setUserSettings(newSettings);
+    },
+    onSuccess: (updatedSettings) => {
+      queryClient.setQueryData(queryKeys.settings.user, updatedSettings);
       processSettingsForTelemetry(updatedSettings);
       posthog.people.set({ isPro: hasDyadProKey(updatedSettings) });
+      setSettingsAtom(updatedSettings);
+    },
+    meta: { showErrorToast: true },
+  });
 
-      setError(null);
-      return updatedSettings;
-    } catch (error) {
-      console.error("Error updating settings:", error);
-      setError(error instanceof Error ? error : new Error(String(error)));
-      throw error;
-    } finally {
-      setLoading(false);
-    }
-  };
+  const updateSettings = useCallback(
+    async (newSettings: Partial<UserSettings>) => {
+      return updateSettingsMutation.mutateAsync(newSettings);
+    },
+    [updateSettingsMutation],
+  );
+
+  const refreshSettings = useCallback(() => {
+    return queryClient.invalidateQueries({
+      queryKey: queryKeys.settings.all,
+    });
+  }, [queryClient]);
+
+  const loading = settingsQuery.isLoading || envVarsQuery.isLoading;
+  const error = settingsQuery.error || envVarsQuery.error || null;
 
   return {
-    settings,
-    envVars,
+    settings: settingsQuery.data ?? null,
+    envVars: envVarsQuery.data ?? {},
     loading,
     error,
     updateSettings,
-
-    refreshSettings: () => {
-      return loadInitialData();
-    },
+    refreshSettings,
   };
 }
 

src/hooks/useSystemPlatform.ts

+import { useQuery } from "@tanstack/react-query";
+import { ipc } from "@/ipc/types";
+import { queryKeys } from "@/lib/queryKeys";
+
+export function useSystemPlatform() {
+  const { data } = useQuery({
+    queryKey: queryKeys.system.platform,
+    queryFn: () => ipc.system.getSystemPlatform(),
+    staleTime: Infinity, // Platform never changes during a session
+  });
+
+  return data ?? null;
+}

src/lib/queryKeys.ts

@@ -15,6 +15,24 @@
  */
 
 export const queryKeys = {
+  // ─────────────────────────────────────────────────────────────────────────────
+  // System
+  // ─────────────────────────────────────────────────────────────────────────────
+  system: {
+    all: ["system"] as const,
+    appVersion: ["system", "appVersion"] as const,
+    platform: ["system", "platform"] as const,
+  },
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Settings
+  // ─────────────────────────────────────────────────────────────────────────────
+  settings: {
+    all: ["settings"] as const,
+    user: ["settings", "user"] as const,
+    envVars: ["settings", "envVars"] as const,
+  },
+
   // ─────────────────────────────────────────────────────────────────────────────
   // Apps
   // ─────────────────────────────────────────────────────────────────────────────
@@ -114,6 +132,20 @@ export const queryKeys = {
       ["search-app-files", appId, query] as const,
   },
 
+  // ─────────────────────────────────────────────────────────────────────────────
+  // App Files
+  // ─────────────────────────────────────────────────────────────────────────────
+  appFiles: {
+    all: ["app-files"] as const,
+    content: ({
+      appId,
+      filePath,
+    }: {
+      appId: number | null;
+      filePath: string | null;
+    }) => ["app-files", "content", appId, filePath] as const,
+  },
+
   // ─────────────────────────────────────────────────────────────────────────────
   // App Name Check
   // ─────────────────────────────────────────────────────────────────────────────
@@ -246,6 +278,14 @@ export const queryKeys = {
     }) => ["supabase", "branches", projectId, organizationSlug] as const,
   },
 
+  // ─────────────────────────────────────────────────────────────────────────────
+  // GitHub
+  // ─────────────────────────────────────────────────────────────────────────────
+  github: {
+    all: ["github"] as const,
+    repos: ["github", "repos"] as const,
+  },
+
   // ─────────────────────────────────────────────────────────────────────────────
   // Neon
   // ─────────────────────────────────────────────────────────────────────────────
@@ -276,6 +316,8 @@ export type QueryKeyOf<T> = T extends readonly unknown[]
 
 /** All possible query keys (useful for typing queryClient operations) */
 export type AppQueryKey =
+  | QueryKeyOf<(typeof queryKeys.system)[keyof typeof queryKeys.system]>
+  | QueryKeyOf<(typeof queryKeys.settings)[keyof typeof queryKeys.settings]>
   | QueryKeyOf<(typeof queryKeys.apps)[keyof typeof queryKeys.apps]>
   | QueryKeyOf<(typeof queryKeys.chats)[keyof typeof queryKeys.chats]>
   | QueryKeyOf<(typeof queryKeys.plans)[keyof typeof queryKeys.plans]>
@@ -290,6 +332,7 @@ export type AppQueryKey =
       (typeof queryKeys.contextPaths)[keyof typeof queryKeys.contextPaths]
     >
   | QueryKeyOf<(typeof queryKeys.tokenCount)[keyof typeof queryKeys.tokenCount]>
+  | QueryKeyOf<(typeof queryKeys.appFiles)[keyof typeof queryKeys.appFiles]>
   | QueryKeyOf<(typeof queryKeys.files)[keyof typeof queryKeys.files]>
   | QueryKeyOf<(typeof queryKeys.appName)[keyof typeof queryKeys.appName]>
   | QueryKeyOf<
@@ -316,6 +359,7 @@ export type AppQueryKey =
     >
   | QueryKeyOf<(typeof queryKeys.mcp)[keyof typeof queryKeys.mcp]>
   | QueryKeyOf<(typeof queryKeys.supabase)[keyof typeof queryKeys.supabase]>
+  | QueryKeyOf<(typeof queryKeys.github)[keyof typeof queryKeys.github]>
   | QueryKeyOf<(typeof queryKeys.neon)[keyof typeof queryKeys.neon]>
   | QueryKeyOf<
       (typeof queryKeys.appEnvVars)[keyof typeof queryKeys.appEnvVars]

src/pages/app-details.tsx

 import { useNavigate, useRouter, useSearch } from "@tanstack/react-router";
 import { normalizePath } from "../../shared/normalizePath";
-import { useAtom, useSetAtom } from "jotai";
-import { appsListAtom, selectedAppIdAtom } from "@/atoms/appAtoms";
+import { useSetAtom } from "jotai";
+import { selectedAppIdAtom } from "@/atoms/appAtoms";
 import { ipc } from "@/ipc/types";
 import { useLoadApps } from "@/hooks/useLoadApps";
 import { useState } from "react";
@@ -49,8 +49,7 @@ export default function AppDetailsPage() {
   const navigate = useNavigate();
   const router = useRouter();
   const search = useSearch({ from: "/app-details" as const });
-  const [appsList] = useAtom(appsListAtom);
-  const { refreshApps } = useLoadApps();
+  const { apps: appsList, refreshApps } = useLoadApps();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);