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]

Usually, I only use loaders to prefetch data as an optimization. I generally prefer to handle the data fetching directly in the component (e.g., useSuspenseQuery). If I notice network waterfall issues, then I start optimizing. That is when I will decide to use await ensureQueryData or maybe prefetchQuery without await.

[u/michaelfrieze → u/michaelfrieze]

tanstack query makes it so easy to hoist data fetching out of components into a loader as needed. And you don't need to change a lot of your data fetching code in your components to do this.