Provide better DX on route data loading

[nikitavoloboev]

Coming from this Discord discussion which has lots of context.

Currently all my routes are looking like this:

function RouteComponent() {
  const { data, error, isLoading } = useSuspenseQuery({
    queryKey: ["new-airdrop-for-claim"],
    queryFn: async () => {
      const data = await $newAirdropForClaim()
      return data
    },
  })
  if (isLoading) return <Loader />
  if (error) return <ErrorShow error={error} />
  return <></>
}

export const Route = createFileRoute("/new-airdrop-for-claim")({
  component: () => <RouteComponent />,
})

The problem with above is that all my route data fetching ends up looking like this. Where the only thing that changes is this line:

const data = await $newAirdropForClaim()

My convention for naming actions is this (but that is not as important):

I thought it would be great to have a system like this perhaps:

export const Route = createFileRoute("/app/airdrops")({
  component: RouteComponent,
  data: async () => await $appAirdrops(),

With some way to use this data in the RouteComponent

Or not really sure but I def need a way to avoid all this boilerplate for route loading as it seems the router should be able to handle this well.

@schiller-manuel said it's good to create some kind of utility like createQueryFileRoute for this.

[nikitavoloboev]

I thought as my loader and error part is reused across my routes (perhaps that's not wise). I would define it in route.tsx for the folder or app (depending on where the route.tsx is placed. This way I don't have to repeat that code. And I can just extract the data part from the query.