PR comments

Author: jorgebaralt

apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-pages.tsx

@@ -15,38 +15,33 @@ import {
   SidebarMenuSub,
   useSidebar,
 } from "~/components/ui/sidebar";
-import { PAGES_INFINITE_QUERY_CONFIG } from "~/lib/pages-config";
 import { useTRPC } from "~/trpc/react";
 import { AppSidebarPageItem } from "./app-sidebar-page-item";
 import { CreatePageButton } from "./create-page-button";
 
 type AppSidebarPagesProps = {
-  initialPagesData: {
-    items: Page[];
-    nextCursor: string | undefined;
+  infinitePagesQueryOptions: {
+    direction: "forward" | "backward";
+    limit: number;
   };
   defaultOpen?: boolean;
 };
 
 export const AppSidebarPages = ({
-  initialPagesData,
+  infinitePagesQueryOptions,
   defaultOpen = true,
 }: AppSidebarPagesProps) => {
   const trpc = useTRPC();
   const { state, setOpen } = useSidebar();
-
+  const queryOptions = trpc.pages.getInfinite.infiniteQueryOptions(
+    infinitePagesQueryOptions,
+  );
   const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
     useInfiniteQuery({
-      ...trpc.pages.getInfinite.infiniteQueryOptions(
-        PAGES_INFINITE_QUERY_CONFIG,
-      ),
+      ...queryOptions,
       getNextPageParam: ({ nextCursor }) => {
         return nextCursor;
       },
-      initialData: {
-        pageParams: [null], // null represents "no cursor" for the first page
-        pages: [initialPagesData],
-      },
     });
 
   const pages = data?.pages?.flatMap((page) => page.items) ?? [];

apps/web/src/app/(app)/@appSidebar/default.tsx

@@ -11,18 +11,26 @@ import {
 } from "~/components/ui/sidebar";
 import { Skeleton } from "~/components/ui/skeleton";
 import { env } from "~/env";
-import { PAGES_INFINITE_QUERY_CONFIG } from "~/lib/pages-config";
-import { api } from "~/trpc/server";
+import { prefetch, trpc } from "~/trpc/server";
 import { DynamicAppSidebarDevtools } from "./_components/app-sidebar-devtools.dynamic";
 import { AppSidebarNavigation } from "./_components/app-sidebar-main";
 import { AppSidebarPages } from "./_components/app-sidebar-pages";
 import { AppSidebarPagesSkeleton } from "./_components/app-sidebar-pages-skeleton";
 import { AppSidebarUser } from "./_components/app-sidebar-user";
 import { AppSidebarUserSkeleton } from "./_components/app-sidebar-user-skeleton";
 
+export const infinitePagesQueryOptions = {
+  direction: "forward" as const,
+  limit: 25,
+} as const;
+
 async function SuspendedAppSidebarPages() {
-  const pagesData = await api.pages.getInfinite(PAGES_INFINITE_QUERY_CONFIG);
-  return <AppSidebarPages initialPagesData={pagesData} />;
+  prefetch(
+    trpc.pages.getInfinite.infiniteQueryOptions(infinitePagesQueryOptions),
+  );
+  return (
+    <AppSidebarPages infinitePagesQueryOptions={infinitePagesQueryOptions} />
+  );
 }
 
 export default function AppSidebar() {

apps/web/src/app/(app)/pages/_components/page-title-textarea.tsx

@@ -6,8 +6,8 @@ import { useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { FullHeightTextarea } from "~/components/ui/full-height-textarea";
 import { cn } from "~/components/utils";
-import { PAGES_INFINITE_QUERY_CONFIG } from "~/lib/pages-config";
 import { useTRPC } from "~/trpc/react";
+import { infinitePagesQueryOptions } from "../../@appSidebar/default";
 
 const DEFAULT_PLACEHOLDER = "New page";
 const DEFAULT_DEBOUNCE_TIME = 150;
@@ -55,7 +55,7 @@ export function PageTitleTextarea({
 
     // Update the pages.getInfinite query cache from sidebar
     queryClient.setQueryData(
-      trpc.pages.getInfinite.infiniteQueryOptions(PAGES_INFINITE_QUERY_CONFIG)
+      trpc.pages.getInfinite.infiniteQueryOptions(infinitePagesQueryOptions)
         .queryKey,
       (old) => {
         if (!old) return old;