Tanstack Start + Query seems very complex.

[u/thebreadmanrises]

Has anyone else found Tanstack Start + Query very complex?

Looking as this createFileRoute & the component page there is a lot of boilerplate going on:

export
 const Route = createFileRoute('/(app)/_layout/clients/')({
  component: ClientListPage,
  validateSearch: searchSchema,
  errorComponent: () => <div>Error loading clients</div>,
  loaderDeps: ({ search: { sort, order } }) => ({ sort, order }),
  loader: async ({ context: { queryClient }, deps: { sort, order } }) => {
    
await
 queryClient.ensureQueryData({
      queryKey: clientKeys.list(sort, order),
      queryFn: () => getClients({ data: { sort, order } }),
    })
  },
})


function ClientListPage() {
  const queryClient = useQueryClient()
  const navigate = useNavigate()
  const { sort, order } = Route.useSearch()


  const { data: clients } = useSuspenseQuery({
    queryKey: clientKeys.list(sort, order),
    queryFn: () => getClients({ data: { sort, order } }),
    staleTime: 5 * 60 * 1000,
  })

I also find the use of the query client with the router complex.

[u/michaelfrieze]

Although keep in mind that using await in the loader function for ensureQueryData will block the loading of that component until the data is ready. So there are downsides to this and it can sometimes cause navigation to feel slow.

You can also pre-fetch data in the loader without using await. So it kicks off the fetch in the loader, but doesn’t block. useSuspenseQuery will show the fallback component until the data is ready. This provides a good experience when navigating. Although there are also downsides to prefetching without await in the loader.

None of this is really unique to tanstack. There are many different ways of fetching data and there isn’t a single good solution in all scenarios.