refactor: extract useAuthenticatedQuery and useAuthenticatedMutation

jonathanlab · claude · jonathanlab · commit bc2bb343b76f · 2025-10-27T17:45:17.000+01:00
Eliminated repetitive auth + query/mutation pattern across hooks by creating: - useAuthenticatedQuery: handles client auth checks for queries - useAuthenticatedMutation: handles client auth checks for mutations Updated hooks: - useUsers: simplified query pattern - useIntegrations: simplified query pattern - useTasks and all task mutations (create/update/delete/duplicate) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/src/renderer/features/tasks/hooks/useTasks.ts b/src/renderer/features/tasks/hooks/useTasks.ts
@@ -1,7 +1,8 @@
-import { useAuthStore } from "@features/auth/stores/authStore";
 import { useTaskExecutionStore } from "@features/tasks/stores/taskExecutionStore";
+import { useAuthenticatedMutation } from "@hooks/useAuthenticatedMutation";
+import { useAuthenticatedQuery } from "@hooks/useAuthenticatedQuery";
 import type { Task } from "@shared/types";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 
 const taskKeys = {
   all: ["tasks"] as const,
@@ -16,105 +17,99 @@ export function useTasks(filters?: {
   repositoryOrg?: string;
   repositoryName?: string;
 }) {
-  const client = useAuthStore((state) => state.client);
-
-  return useQuery({
-    queryKey: taskKeys.list(filters),
-    queryFn: async () => {
-      if (!client) throw new Error("Not authenticated");
-      return (await client.getTasks(
+  return useAuthenticatedQuery(
+    taskKeys.list(filters),
+    (client) =>
+      client.getTasks(
         filters?.repositoryOrg,
         filters?.repositoryName,
-      )) as unknown as Task[];
-    },
-    enabled: !!client,
-  });
+      ) as unknown as Promise<Task[]>,
+  );
 }
 
 export function useCreateTask() {
-  const client = useAuthStore((state) => state.client);
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: async ({
-      description,
-      repositoryConfig,
-    }: {
-      description: string;
-      repositoryConfig?: { organization: string; repository: string };
-    }) => {
-      if (!client) throw new Error("Not authenticated");
-      const task = (await client.createTask(
+  return useAuthenticatedMutation(
+    (
+      client,
+      {
         description,
         repositoryConfig,
-      )) as unknown as Task;
-      return task;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: taskKeys.lists() });
+      }: {
+        description: string;
+        repositoryConfig?: { organization: string; repository: string };
+      },
+    ) =>
+      client.createTask(
+        description,
+        repositoryConfig,
+      ) as unknown as Promise<Task>,
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: taskKeys.lists() });
+      },
     },
-  });
+  );
 }
 
 export function useUpdateTask() {
-  const client = useAuthStore((state) => state.client);
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: async ({
-      taskId,
-      updates,
-    }: {
-      taskId: string;
-      updates: Partial<Task>;
-    }) => {
-      if (!client) throw new Error("Not authenticated");
-      return await client.updateTask(
+  return useAuthenticatedMutation(
+    (
+      client,
+      {
+        taskId,
+        updates,
+      }: {
+        taskId: string;
+        updates: Partial<Task>;
+      },
+    ) =>
+      client.updateTask(
         taskId,
         updates as Parameters<typeof client.updateTask>[1],
-      );
-    },
-    onSuccess: (_, { taskId }) => {
-      queryClient.invalidateQueries({ queryKey: taskKeys.lists() });
-      queryClient.invalidateQueries({ queryKey: taskKeys.detail(taskId) });
+      ),
+    {
+      onSuccess: (_, { taskId }) => {
+        queryClient.invalidateQueries({ queryKey: taskKeys.lists() });
+        queryClient.invalidateQueries({ queryKey: taskKeys.detail(taskId) });
+      },
     },
-  });
+  );
 }
 
 export function useDeleteTask() {
-  const client = useAuthStore((state) => state.client);
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: async (taskId: string) => {
-      if (!client) throw new Error("Not authenticated");
-      await client.deleteTask(taskId);
+  return useAuthenticatedMutation(
+    (client, taskId: string) => client.deleteTask(taskId),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: taskKeys.lists() });
+      },
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: taskKeys.lists() });
-    },
-  });
+  );
 }
 
 export function useDuplicateTask() {
-  const client = useAuthStore((state) => state.client);
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: async (taskId: string) => {
-      if (!client) throw new Error("Not authenticated");
-      return (await client.duplicateTask(taskId)) as unknown as Task;
-    },
-    onSuccess: (newTask, originalTaskId) => {
-      // Copy working directory from original task to new task
-      const { getTaskState, setRepoPath } = useTaskExecutionStore.getState();
-      const originalState = getTaskState(originalTaskId);
+  return useAuthenticatedMutation(
+    (client, taskId: string) =>
+      client.duplicateTask(taskId) as unknown as Promise<Task>,
+    {
+      onSuccess: (newTask, originalTaskId) => {
+        const { getTaskState, setRepoPath } = useTaskExecutionStore.getState();
+        const originalState = getTaskState(originalTaskId);
 
-      if (originalState.repoPath) {
-        setRepoPath(newTask.id, originalState.repoPath);
-      }
+        if (originalState.repoPath) {
+          setRepoPath(newTask.id, originalState.repoPath);
+        }
 
-      queryClient.invalidateQueries({ queryKey: taskKeys.lists() });
+        queryClient.invalidateQueries({ queryKey: taskKeys.lists() });
+      },
     },
-  });
+  );
 }
diff --git a/src/renderer/hooks/useAuthenticatedMutation.ts b/src/renderer/hooks/useAuthenticatedMutation.ts
@@ -0,0 +1,31 @@
+import type { PostHogAPIClient } from "@api/posthogClient";
+import { useAuthStore } from "@features/auth/stores/authStore";
+import type {
+  UseMutationOptions,
+  UseMutationResult,
+} from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
+
+type AuthenticatedMutationFn<TVariables, TData> = (
+  client: PostHogAPIClient,
+  variables: TVariables,
+) => Promise<TData>;
+
+export function useAuthenticatedMutation<
+  TData = unknown,
+  TError = Error,
+  TVariables = void,
+>(
+  mutationFn: AuthenticatedMutationFn<TVariables, TData>,
+  options?: Omit<UseMutationOptions<TData, TError, TVariables>, "mutationFn">,
+): UseMutationResult<TData, TError, TVariables> {
+  const client = useAuthStore((state) => state.client);
+
+  return useMutation({
+    mutationFn: async (variables: TVariables) => {
+      if (!client) throw new Error("Not authenticated");
+      return await mutationFn(client, variables);
+    },
+    ...options,
+  });
+}
diff --git a/src/renderer/hooks/useAuthenticatedQuery.ts b/src/renderer/hooks/useAuthenticatedQuery.ts
@@ -0,0 +1,35 @@
+import type { PostHogAPIClient } from "@api/posthogClient";
+import { useAuthStore } from "@features/auth/stores/authStore";
+import type {
+  QueryKey,
+  UseQueryOptions,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
+
+type AuthenticatedQueryFn<T> = (client: PostHogAPIClient) => Promise<T>;
+
+export function useAuthenticatedQuery<
+  TData = unknown,
+  TError = Error,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  queryKey: TQueryKey,
+  queryFn: AuthenticatedQueryFn<TData>,
+  options?: Omit<
+    UseQueryOptions<TData, TError, TData, TQueryKey>,
+    "queryKey" | "queryFn" | "enabled"
+  >,
+): UseQueryResult<TData, TError> {
+  const client = useAuthStore((state) => state.client);
+
+  return useQuery({
+    queryKey,
+    queryFn: async () => {
+      if (!client) throw new Error("Not authenticated");
+      return await queryFn(client);
+    },
+    enabled: !!client,
+    ...options,
+  });
+}
diff --git a/src/renderer/hooks/useIntegrations.ts b/src/renderer/hooks/useIntegrations.ts
@@ -1,11 +1,10 @@
-import { useAuthStore } from "@features/auth/stores/authStore";
 import {
   useIntegrationSelectors,
   useIntegrationStore,
 } from "@features/integrations/stores/integrationStore";
 import type { RepositoryConfig } from "@shared/types";
-import { useQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
+import { useAuthenticatedQuery } from "./useAuthenticatedQuery";
 
 interface Integration {
   id: number;
@@ -21,17 +20,12 @@ const integrationKeys = {
 };
 
 export function useIntegrations() {
-  const client = useAuthStore((state) => state.client);
   const setIntegrations = useIntegrationStore((state) => state.setIntegrations);
 
-  const query = useQuery({
-    queryKey: integrationKeys.list(),
-    queryFn: async () => {
-      if (!client) throw new Error("Not authenticated");
-      return (await client.getIntegrations()) as Integration[];
-    },
-    enabled: !!client,
-  });
+  const query = useAuthenticatedQuery(
+    integrationKeys.list(),
+    (client) => client.getIntegrations() as Promise<Integration[]>,
+  );
 
   useEffect(() => {
     if (query.data) {
@@ -43,20 +37,17 @@ export function useIntegrations() {
 }
 
 function useRepositories(integrationId?: number) {
-  const client = useAuthStore((state) => state.client);
   const setRepositories = useIntegrationStore((state) => state.setRepositories);
 
-  const query = useQuery({
-    queryKey: integrationKeys.repositories(integrationId),
-    queryFn: async () => {
-      if (!client) throw new Error("Not authenticated");
+  const query = useAuthenticatedQuery(
+    integrationKeys.repositories(integrationId),
+    async (client) => {
       if (!integrationId) return [];
       return (await client.getGithubRepositories(
         integrationId,
       )) as RepositoryConfig[];
     },
-    enabled: !!client && !!integrationId,
-  });
+  );
 
   useEffect(() => {
     if (query.data) {
diff --git a/src/renderer/hooks/useUsers.ts b/src/renderer/hooks/useUsers.ts
@@ -1,21 +1,19 @@
-import { useAuthStore } from "@features/auth/stores/authStore";
+import type { Schemas } from "@api/generated";
 import { useUsersStore } from "@stores/usersStore";
-import { useQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
+import { useAuthenticatedQuery } from "./useAuthenticatedQuery";
 
 export function useUsers() {
-  const client = useAuthStore((state) => state.client);
   const setUsers = useUsersStore((state) => state.setUsers);
 
-  const query = useQuery({
-    queryKey: ["users"],
-    queryFn: async () => {
-      if (!client) throw new Error("Not authenticated");
-      return await client.getUsers();
+  const query = useAuthenticatedQuery(
+    ["users"],
+    async (client) => {
+      const data = await client.getUsers();
+      return data as Schemas.UserBasic[];
     },
-    enabled: !!client,
-    staleTime: 5 * 60 * 1000, // 5 minutes
-  });
+    { staleTime: 5 * 60 * 1000 },
+  );
 
   useEffect(() => {
     if (query.data) {
