feat: move queries to query hooks

apps/web/src/components/app-sidebar.tsx

@@ -13,6 +13,9 @@ import {
   SidebarFooter,
   SidebarRail,
 } from "@/components/ui/sidebar"
+import { Suspense } from "react"
+import { Button } from "./ui/button"
+import { Link } from "@tanstack/react-router"
 
 const data = {
   user: {
@@ -75,7 +78,13 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         <NavMain items={data.navMain} />
       </SidebarContent>
       <SidebarFooter>
-        <NavUser />
+        <Suspense fallback={
+          <Button asChild>
+            <Link href="/login" className="w-full">Log in</Link>
+          </Button>
+        } name="nav-user-data">
+          <NavUser />
+        </Suspense>
       </SidebarFooter>
       <SidebarRail />
     </Sidebar>

apps/web/src/components/nav-user.tsx

@@ -5,7 +5,6 @@ import {
   ChevronsUpDown,
   LogOut,
 } from "lucide-react"
-
 import {
   Avatar,
   AvatarFallback,
@@ -26,83 +25,101 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar"
-import { useQuery } from "@tanstack/react-query"
-import axios from "axios";
-import type { AppBskyActorGetProfile } from "@atcute/client/lexicons"
-import QueryPlaceholder from "./query-placeholder"
+import { useUserQuery } from "@/queries/self"
 import { Button } from "./ui/button"
 import { Link } from "@tanstack/react-router"
+import { Skeleton } from "./ui/skeleton"
 
 export function NavUser() {
   const { isMobile } = useSidebar()
 
-  const userQuery = useQuery({
-    queryKey: ['/oauth/me'],
-    queryFn: async () => {
-      const res = await axios.get<AppBskyActorGetProfile.Output>('/oauth/me');
-      return res.data;
-    },
-  });
-  const { data } = userQuery;
+  const userQuery = useUserQuery();
 
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <QueryPlaceholder query={userQuery}
-          noData={
+  if (userQuery.isLoading) {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            size="lg"
+            className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <Skeleton className="h-8 w-8 rounded-lg" />
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <Skeleton className="h-2 w-20 rounded-lg" />
+            </div>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    )
+  }
+
+  if (userQuery.isError || !userQuery.data) {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            size="lg"
+            className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
             <Button asChild>
               <Link href="/login" className="w-full">Log in</Link>
             </Button>
-          }
-        >
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <SidebarMenuButton
-                size="lg"
-                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-              >
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    );
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={userQuery.data.avatar} alt={userQuery.data.displayName ?? `@${userQuery.data.handle}`} />
+                <AvatarFallback className="rounded-lg">{userQuery.data.handle.substring(2)}</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{userQuery.data.displayName ?? `@${userQuery.data.handle}`}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                 <Avatar className="h-8 w-8 rounded-lg">
-                  <AvatarImage src={data?.avatar} alt={data?.displayName ?? `@${data?.handle}`} />
-                  <AvatarFallback className="rounded-lg">{data?.handle.substring(2)}</AvatarFallback>
+                  <AvatarImage src={userQuery.data.avatar} alt={userQuery.data.displayName ?? `@${userQuery.data.handle}`} />
+                  <AvatarFallback className="rounded-lg">{userQuery.data.handle.substring(2)}</AvatarFallback>
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">{data?.displayName ?? `@${data?.handle}`}</span>
-                </div>
-                <ChevronsUpDown className="ml-auto size-4" />
-              </SidebarMenuButton>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-              side={isMobile ? "bottom" : "right"}
-              align="end"
-              sideOffset={4}
-            >
-              <DropdownMenuLabel className="p-0 font-normal">
-                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                  <Avatar className="h-8 w-8 rounded-lg">
-                    <AvatarImage src={data?.avatar} alt={data?.displayName ?? `@${data?.handle}`} />
-                    <AvatarFallback className="rounded-lg">{data?.handle.substring(2)}</AvatarFallback>
-                  </Avatar>
-                  <div className="grid flex-1 text-left text-sm leading-tight">
-                    <span className="truncate font-semibold">{data?.displayName ?? `@${data?.handle}`}</span>
-                  </div>
+                  <span className="truncate font-semibold">{userQuery.data.displayName ?? `@${userQuery.data.handle}`}</span>
                 </div>
-              </DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem>
-                  <BadgeCheck />
-                  Account
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
               <DropdownMenuItem>
-                <LogOut />
-                Log out
+                <BadgeCheck />
+                Account
               </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </QueryPlaceholder>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </SidebarMenuItem>
     </SidebarMenu>
   )

apps/web/src/main.tsx

@@ -19,7 +19,15 @@ declare module '@tanstack/react-router' {
 
 const creds = new CredentialManager({ service: `https://${SERVER_URL}/api/` });
 const rpc = new XRPC({ handler: creds });
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      structuralSharing: false,
+      retry: false,
+    }
+  }
+});
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

apps/web/src/queries/recipe.ts

@@ -0,0 +1,31 @@
+import { useXrpc } from "@/hooks/use-xrpc";
+import { useQuery } from "@tanstack/react-query";
+
+const RQKEY_ROOT = 'posts';
+export const RQKEY = (cursor: string, did: string, rkey: string) => [RQKEY_ROOT, cursor, did, rkey];
+
+export const useRecipesQuery = (cursor: string, did?: string) => {
+  const { rpc } = useXrpc();
+  return useQuery({
+    queryKey: RQKEY(cursor, '', ''),
+    queryFn: async () => {
+      const res = await rpc.get('moe.hayden.cookware.getRecipes', {
+        params: { cursor, did },
+      });
+      return res.data;
+    },
+  });
+};
+
+export const useRecipeQuery = (did: string, rkey: string) => {
+  const { rpc } = useXrpc();
+  return useQuery({
+    queryKey: RQKEY('', did, rkey),
+    queryFn: async () => {
+      const res = await rpc.get('moe.hayden.cookware.getRecipe', {
+        params: { did, rkey },
+      });
+      return res.data;
+    },
+  });
+};

apps/web/src/queries/self.ts

@@ -0,0 +1,13 @@
+import { AppBskyActorGetProfile } from "@atcute/client/lexicons";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+
+export const useUserQuery = () => {
+  return useQuery({
+    queryKey: ['self'],
+    queryFn: async () => {
+      const res = await axios.get<AppBskyActorGetProfile.Output>('/oauth/me');
+      return res.data;
+    },
+  });
+}

apps/web/src/routes/(app)/index.lazy.tsx

@@ -9,32 +9,16 @@ import {
 } from '@/components/ui/breadcrumb'
 import { Separator } from '@/components/ui/separator'
 import { SidebarTrigger } from '@/components/ui/sidebar'
-import { useQuery } from '@tanstack/react-query'
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { useXrpc } from '@/hooks/use-xrpc'
-import { Clock, CookingPot, ListIcon } from 'lucide-react'
 import QueryPlaceholder from '@/components/query-placeholder'
+import { useRecipesQuery } from '@/queries/recipe'
+import { RecipeCard } from '@/screens/Recipes/RecipeCard'
 
 export const Route = createLazyFileRoute('/(app)/')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
-  const { rpc } = useXrpc()
-
-  const query = useQuery({
-    queryKey: ['moe.hayden.cookware.getRecipes', { cursor: '' }],
-    queryFn: () =>
-      rpc.get('moe.hayden.cookware.getRecipes', {
-        params: { cursor: '' },
-      }),
-  })
+  const query = useRecipesQuery('');
 
   return (
     <>
@@ -58,30 +42,17 @@ function RouteComponent() {
       <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
         <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
           <QueryPlaceholder query={query} cards cardsCount={12}>
-            {query.data?.data.recipes.map((v, idx) => (
-              <Link key={idx} href={`/recipes/${v.author}/${v.rkey}`}>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{v.title}</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <p>{v.description}</p>
-                  </CardContent>
-                  <CardFooter className="flex gap-6 text-sm text-muted-foreground">
-                    <span className="flex items-center gap-2">
-                      <ListIcon className="size-4" /> <span>{v.steps}</span>
-                    </span>
-
-                    <span className="flex items-center gap-2">
-                      <CookingPot className="size-4" /> <span>{v.ingredients}</span>
-                    </span>
-
-                    <span className="flex items-center gap-2">
-                      <Clock className="size-4" /> <span>30min.</span>
-                    </span>
-                  </CardFooter>
-                </Card>
-              </Link>
+            {query.data?.recipes.map((recipe, idx) => (
+              <RecipeCard
+                title={recipe.title}
+                description={recipe.description}
+                rkey={recipe.rkey}
+                author={recipe.author}
+                time={{ amount: 30, unit: 'min' }}
+                steps={recipe.steps}
+                ingredients={recipe.ingredients}
+                key={idx}
+                />
             ))}
           </QueryPlaceholder>
         </div>