Avoid double fetch when query is prefetched and errors?

[C-Higgins]

ensureQueryData does not persist any sort of error state if it fails to fetch. Then, when using useQuery for the same query immediately after, there is no way to avoid it fetching again.

Simplified example with Tanstack Router:

export const Route = createRootRouteWithContext<{
  queryClient: typeof queryClient;
}>()({
  component: Root,
  beforeLoad: async ({ context, location }) => {
    try {
      await context.queryClient.ensureQueryData(getGetUserQueryOptions()); // fetches and errors
    } catch (error) {
        throw redirect({ to: "/login", search: { nextPath: location.href } });
      }
    }
  },
});

function Root() {
  const userQuery = useQuery(getGetUserQueryOptions()); // fetches again immediately
...

How can I avoid this?

[TkDodo]

if you redirect in beforeLoad, I’d expect the component not to be rendered at all. Is this a router issue?

[C-Higgins]

if you redirect in beforeLoad, I’d expect the component not to be rendered at all. Is this a router issue?

The issue is that the component at /login is of course a child of the root component, so the root component renders anyway.
This isn't a router issue. The generalized problem is that if I do any sort of prefetching before a consumer renders, that consumer has seemingly no way of knowing that the prefetch failed, and so will immediately try again.
While I can read the query state in every consumer and check for the last fail time, this is of course impractical. Is there a simpler way? Ideally the prefetch could put the query into an error state and the stale time of that would be respected.

[TkDodo]

that consumer has seemingly no way of knowing that the prefetch failed

that's very likely not what's happening. The query fails and it's put into an error state. But when the consumer mounts, it sees the error, sees that there is no data and puts the query back into pending state and triggers a refetch. That's the expected default behavior. Error'd queries are always stale.

you can set retryOnMount: false to change that.

[C-Higgins]

that consumer has seemingly no way of knowing that the prefetch failed

that's very likely not what's happening. The query fails and it's put into an error state. But when the consumer mounts, it sees the error, sees that there is no data and puts the query back into pending state and triggers a refetch. That's the expected default behavior. Error'd queries are always stale.

you can set retryOnMount: false to change that.

Not sure how I missed retryOnMount. This is the answer, thank you.