Tanstack Start

He estado cacharreando con la integración con tRPC 11 y ya lo he entendido.

Para hacer un fetch desde el cliente con prefetching desde el servidor usando Tanstack Query

Con esto el cliente recibe la lista de people en el HTML inicial y evitamos mostrar loaders/contenedores vacíos durante los primeros milisegundos.

import { useQuery } from '@tanstack/react-query'
import { createFileRoute } from '@tanstack/react-router'
import { useTRPC } from '@/integrations/trpc/react'
 
export const Route = createFileRoute('/servertrpc')({
  component: RouteComponent,
  //Aquí hacemos prefetching desde el servidor, para que el HTML que enviamos a cliente ya tenga los datos
  loader: async({context}) => {
    await context.queryClient.prefetchQuery(
      context.trpc.people.file.queryOptions()
    )
  }
})
 
//Aquí usamos useQuery para cachear/refrescar esos datos desde el cliente
function RouteComponent() {
  const trpc = useTRPC()
  const { data } = useQuery(trpc.people.file.queryOptions())
  return <div className="p-4">{Array.isArray(data) && data.map((p) => <p key={p.id}>{p.name}</p>)}</div>
}

Si queremos hacer fetch desde el servidor y mandarlo al cliente para mostrarlo de manera estática:

import { createFileRoute } from '@tanstack/react-router'
import { trpcClient } from '@/integrations/tanstack-query/root-provider'
 
export const Route = createFileRoute('/servertrpc2')({
  component: RouteComponent,
  loader: async() => {
  //Hacemos directamente fetch desde trpcClient
    return await trpcClient.people.file.query()
  }
})
 
function RouteComponent() {
	//Recogemos los datos del loader
  const data = Route.useLoaderData()
  return <div className="p-4">{Array.isArray(data) && data.map((p) => <p key={p.id}>{p.name}</p>)}</div>
}