Why do I have an extra request when using it with TanStack Query? (and some suspense confusion)

[szmarci]

I'm trying to get my head around when using the Router in combination with TanStack Query.
So far, I'm very happy with it, there are just a few things I don't understand.

I have this Route component:

export const Route = createFileRoute('/route')({
  component: RouteComponent,
  validateSearch: routeSchema,
  async loader({
    context: { queryClient, apiurl },
    params: { id },
  }) {
    queryClient.ensureQueryData(getData(apiurl, id))
  },
})

function RouteComponent() {
  const { data: d, isPending } = useQuery(getData(apiurl, id))
}

If I use it like that, I get one network request and everything is fine, but there is no suspension.
If I return the data from the loader function, I get the component to suspend but I get an extra network request fired.

If I use useSuspenseQuery I get what I want (only one request) but with a subtle difference:

• without return, it immediately suspends, fires the request and when it data is ready it renders the component
• with return, it starts the request first, then suspends and when data is ready the component renders

In both cases there are only one request.

My question is why are there two request when I return from the loader with useQuery? I logged const result = Route.useLoaderData(); at the top and the data is there when the component first rendered, how come useQuery is not aware of it?
Shouldn't the query already be in the cache?

[schiller-manuel]

what does getData return? probably needs a complete example repo for analysis

[szmarci]

getData is just:

export const getData = (id) => {
  return queryOptions({
    queryKey: ["some keys", id],
    queryFn: async () => fetch("some url"),
  })
}

Do you think any of my observations are against how it supposed to work? I mean the double request or the subtle suspense difference.
If that is the case I'll try to put together an example repo.