significant refactor

src/app/routes/_authed/tournaments/index.tsx

@@ -2,19 +2,19 @@ import Page from '@/components/page'
 import { Stack } from '@mantine/core'
 import { createFileRoute } from '@tanstack/react-router'
 import { TournamentCard } from '@/features/tournaments/components/tournament-card'
-import { tournamentQueries } from '@/features/tournaments/queries'
-import { useQuery } from '@tanstack/react-query'
+import { tournamentQueries, useTournaments } from '@/features/tournaments/queries'
 import { useAuth } from '@/contexts/auth-context'
 import { useSheet } from '@/hooks/use-sheet'
 import Sheet from '@/components/sheet/sheet'
 import TournamentForm from '@/features/tournaments/components/tournament-form'
 import { PlusIcon } from '@phosphor-icons/react'
 import Button from '@/components/button'
+import { prefetchServerQuery } from '@/lib/tanstack-query/utils/prefetch'
 
 export const Route = createFileRoute('/_authed/tournaments/')({
   beforeLoad: async ({ context }) => {
     const { queryClient } = context;
-    await queryClient.ensureQueryData(tournamentQueries.list())
+    await prefetchServerQuery(queryClient, tournamentQueries.list())
   },
   loader: () => ({
     header: {
@@ -27,7 +27,7 @@ export const Route = createFileRoute('/_authed/tournaments/')({
 })
 
 function RouteComponent() {
-  const { data: tournaments } = useQuery(tournamentQueries.list());
+  const { data: tournaments } = useTournaments();
   const { roles } = useAuth();
   const sheet = useSheet();