Prefetch project data

app/(dashboard)/[tenant]/projects/[projectId]/layout.tsx

@@ -1,12 +1,16 @@
 "use client";
 
 import { TaskListsProvider } from "@/hooks/use-tasklist";
+import { useProjectPrefetch } from "@/hooks/use-project-prefetch";
 import { useParams } from "next/navigation";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-	const { projectId } = useParams();
+	const params = useParams();
+	const projectId = +params.projectId!;
+
+	useProjectPrefetch(projectId);
 
 	return (
-		<TaskListsProvider projectId={+projectId!}>{children}</TaskListsProvider>
+		<TaskListsProvider projectId={projectId}>{children}</TaskListsProvider>
 	);
 }

components/form/task.tsx

@@ -18,8 +18,7 @@ export default function InlineTaskForm({
 	const [value, setValue] = useState("");
 	const inputRef = useRef<HTMLInputElement>(null);
 
-	const openCreate = useCallback(() => setIsCreating(true), []);
-	useKeyboardShortcut("n", () => openCreate, !isCreating);
+	useKeyboardShortcut("n", () => setIsCreating(true));
 
 	const handleSubmit = useCallback(async () => {
 		await action(value);

components/project/events/full-calendar.tsx

@@ -74,8 +74,7 @@ export function FullCalendar({
 		parseAsBoolean.withDefault(false),
 	);
 
-	const openCreate = useCallback(() => setCreate(true), [setCreate]);
-	useKeyboardShortcut("n", () => openCreate);
+	useKeyboardShortcut("n", () => setCreate(true));
 
 	const [selectedDay, setSelectedDay] = useState(today);
 	const [currentMonth, setCurrentMonth] = useState(format(today, "MMM-yyyy"));

hooks/use-project-prefetch.ts

@@ -0,0 +1,59 @@
+"use client";
+
+import { useTRPC } from "@/trpc/client";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+
+export function useProjectPrefetch(projectId: number) {
+	const trpc = useTRPC();
+	const queryClient = useQueryClient();
+
+	useEffect(() => {
+		if (!projectId) return;
+
+		const prefetchData = async () => {
+			const baseQueries = [
+				queryClient.prefetchQuery(
+					trpc.events.getByMonth.queryOptions({
+						projectId,
+						date: new Date(),
+					}),
+				),
+				queryClient.prefetchQuery(
+					trpc.projects.getProjectById.queryOptions({
+						id: projectId,
+					}),
+				),
+			];
+
+			const taskListsQuery = queryClient.prefetchQuery(
+				trpc.tasks.getTaskLists.queryOptions({
+					projectId,
+				}),
+			);
+
+			await Promise.allSettled([...baseQueries, taskListsQuery]);
+
+			const taskListsData = queryClient.getQueryData(
+				trpc.tasks.getTaskLists.queryKey({
+					projectId,
+				}),
+			);
+
+			if (taskListsData) {
+				const individualTaskListQueries = taskListsData.map((taskList) =>
+					queryClient.prefetchQuery(
+						trpc.tasks.getListById.queryOptions({
+							id: taskList.id,
+						}),
+					),
+				);
+
+				await Promise.allSettled(individualTaskListQueries);
+			}
+		};
+
+		prefetchData();
+	}, [projectId, queryClient, trpc]);
+}
+

package.json

@@ -50,7 +50,7 @@
     "@upstash/search": "^0.1.5",
     "@upstash/workflow": "^0.2.16",
     "autoprefixer": "10.4.14",
-    "caniuse-lite": "^1.0.30001735",
+    "caniuse-lite": "^1.0.30001737",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

trpc/routers/tasks.ts

@@ -31,9 +31,9 @@ export const tasksRouter = createTRPCRouter({
 			const hasAccess = await canViewProject(ctx, input.projectId);
 			if (!hasAccess) {
 				throw new TRPCError({
-				code: "FORBIDDEN",
-				message: "Project access denied",
-			});
+					code: "FORBIDDEN",
+					message: "Project access denied",
+				});
 			}
 
 			const data = await ctx.db.query.taskList