fix: optimized rerenders caused by useList hooks

src/hooks/lists/useBoardsList.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { BoardSchema } from "@/lib/client";
 import { getBoardsOptions } from "@/lib/client/@tanstack/react-query.gen";
 
@@ -8,24 +8,27 @@ type Props = {
 };
 
 const useBoardsList = ({ projectId }: Props) => {
+    const queryClient = useQueryClient();
+
     const [boards, setBoards] = useState<BoardSchema[]>([]);
 
-    const { data, refetch, isLoading } = useQuery({
-        ...getBoardsOptions({ path: { projectId: projectId! } }),
-        enabled: projectId !== undefined,
-    });
+    const fetchBoards = () => {
+        if (!projectId) return;
+        queryClient
+            .fetchQuery({
+                ...getBoardsOptions({ path: { projectId } }),
+            })
+            .then(data => {
+                setBoards(data.boards);
+            })
+            .catch(err => console.error(err));
+    };
 
     useEffect(() => {
-        if (projectId === undefined) {
-            setBoards([]);
-            return;
-        }
-        if (data?.boards) {
-            setBoards(data.boards);
-        }
-    }, [data?.boards, projectId]);
+        fetchBoards();
+    }, [projectId]);
 
-    return { boards, setBoards, refetch, isLoading };
+    return { boards, setBoards, refetch: fetchBoards };
 };
 
 export default useBoardsList;

src/hooks/lists/useDealsList.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { DealSchema } from "@/lib/client";
 import { getDealsOptions } from "@/lib/client/@tanstack/react-query.gen";
 
@@ -10,22 +10,27 @@ type Props = {
 const useDealsList = ({ boardId }: Props) => {
     const [deals, setDeals] = useState<DealSchema[]>([]);
 
-    const { data, refetch, isLoading } = useQuery({
-        ...getDealsOptions({ path: { boardId: boardId! } }),
-        enabled: boardId !== undefined,
+    const queryClient = useQueryClient();
+
+    const fetchDeals = () => {
+        if (!boardId) return;
+        queryClient
+            .fetchQuery({
+                ...getDealsOptions({ path: { boardId } }),
+            })
+            .then(data => {
+                setDeals(data.deals);
+            })
+            .catch(err => {
+                console.error(err);
             });
+    };
 
     useEffect(() => {
-        if (boardId === undefined) {
-            setDeals([]);
-            return;
-        }
-        if (data?.deals) {
-            setDeals(data.deals);
-        }
-    }, [data?.deals, boardId]);
+        fetchDeals();
+    }, [boardId]);
 
-    return { deals, setDeals, refetch, isLoading };
+    return { deals, setDeals, refetch: fetchDeals };
 };
 
 export default useDealsList;

src/hooks/lists/useProjectsList.ts

@@ -1,27 +1,29 @@
 import { useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { ProjectSchema } from "@/lib/client";
 import { getProjectsOptions } from "@/lib/client/@tanstack/react-query.gen";
 
 const useProjectsList = () => {
-    const { refetch, data, isLoading } = useQuery({
-        ...getProjectsOptions(),
-    });
+    const queryClient = useQueryClient();
 
     const [projects, setProjects] = useState<ProjectSchema[]>([]);
 
-    const refetchProjects = async () => {
-        const res = await refetch();
-        setProjects(res.data?.projects ?? []);
+    const fetchProjects = () => {
+        queryClient
+            .fetchQuery({
+                ...getProjectsOptions(),
+            })
+            .then(data => {
+                setProjects(data.projects);
+            })
+            .catch(err => console.error(err));
     };
 
     useEffect(() => {
-        if (data?.projects) {
-            setProjects(data.projects);
-        }
-    }, [data?.projects]);
+        fetchProjects();
+    }, []);
 
-    return { projects, setProjects, refetch: refetchProjects, isLoading };
+    return { projects, setProjects, refetch: fetchProjects };
 };
 
 export default useProjectsList;

src/hooks/lists/useStatusesList.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { StatusSchema } from "@/lib/client";
 import { getStatusesOptions } from "@/lib/client/@tanstack/react-query.gen";
 
@@ -8,24 +8,27 @@ type Props = {
 };
 
 const useStatusesList = ({ boardId }: Props) => {
+    const queryClient = useQueryClient();
+
     const [statuses, setStatuses] = useState<StatusSchema[]>([]);
 
-    const { data, refetch, isLoading } = useQuery({
-        ...getStatusesOptions({ path: { boardId: boardId! } }),
-        enabled: boardId !== undefined,
-    });
+    const fetchStatuses = () => {
+        if (!boardId) return;
+        queryClient
+            .fetchQuery({
+                ...getStatusesOptions({ path: { boardId } }),
+            })
+            .then(data => {
+                setStatuses(data.statuses);
+            })
+            .catch(err => console.error(err));
+    };
 
     useEffect(() => {
-        if (boardId === undefined) {
-            setStatuses([]);
-            return;
-        }
-        if (data?.statuses) {
-            setStatuses(data.statuses);
-        }
-    }, [data?.statuses, boardId]);
+        fetchStatuses();
+    }, [boardId]);
 
-    return { statuses, setStatuses, refetch, isLoading };
+    return { statuses, setStatuses, refetch: fetchStatuses };
 };
 
 export default useStatusesList;