refetchOnMount behavior differs between useQuery and useSuspenseQuery - Intentional?

[lackner-codefy]

Hi community,

I stumpled upon this issue, and I'm not sure if its considered a bug or expected behavior. At least it feels "wrong" to me. The situation is as follows:

In my project, for a particular query key, some locations in the code use useQuery and handle errors manually:

export default function ComponentA({}: {}) {
  useQuery({
    queryKey: ['key'],
    queryFn: () => { console.log("fetch"); throw "some error" },
    throwOnError: false,
  })

  [...]
}

Other locations use useSuspenseQuery:

export default function ComponentB({}: {}) {
  useSuspenseQuery({
    queryKey: ['key'],
    queryFn: () => { console.log("fetch"); throw "some error" },
  })

  [...]
}

Now, consider the following situation:

• ComponentA is mounted
  • Fetch is triggered
  • Component handles error
• ComponentA is unmounted
• ComponentB is mounted
  • No fetch is triggered <- This is what I consider the bug!

Despite refetchOnMount being true, the error boundary is triggered immediately, without giving the component any chance to actually load data. Note that results also don't change by setting it explicitly to true, or setting it to "always".

As said above, this feels wrong to me, and limits the ability to mix useQuery and useSuspenseQuery in the same project. ComponentB knows nothing about ComponentA attempting to fetch the data before. ComponentB is located somewhere, where it is guaranteed that the backend will provide a useful response, but the code never attempts to load it. Note that remounting ComponentA actually attempts to refetch, as expected.

For testing, you can use the following patch that modifies the suspense testcase within this repo:
https://github.com/lackner-codefy/query/commit/638b09e8e7b2d39476800d9bf70a9416c78d64b3.patch

Or alternatively, clone the fork below:
https://github.com/lackner-codefy/query/tree/testcase-suspense-query/examples/react/suspense

Would be great to get some input on this :)

Best Regards

[TkDodo]

do you reset the error boundary after componentA unmounts? there won’t be another fetch until the error boundary is reset.

[lackner-codefy]

Hello @TkDodo,

thanks for the fast reply! Your suggestion to explicitly reset the (query) error boundary inbetween indeed works.

  const errorBoundary = useQueryErrorResetBoundary();
  errorBoundary.reset();

That said, it does not seem very practicable. The example above is simplified quite a bit, and the transition between ComponentA and ComponentB is much less obvious in practice. The fetches are from within hooks, the components are nested, and so on. I wouldn't even know where to put the code.

It would be great to get some advise on how to solve this "in practice". The example seems simple enough not to warrant an elaborate solution involving manual code to reset error boundaries.

Also, note that useQuery does refetch on remount, without ever passing the previous error-ed status to the component. Why does useSuspenseQuery not behave the same?

Are there technical reasons that make it impossible, or is it a design decision?

[TkDodo]

What I’ve done is usually, when an error occurs, I show the error boundary and let the user retry on a button click (at which point I’d reset the boundary). Additionally, I have set resetKeys on react-error-boundary to the path of the URL so that we get an automatic reset when the user just navigates away to a different page.

Why does useSuspenseQuery not behave the same?

Because suspense unmounts the component and re-mounts it, that’s a different behaviour than useQuery.