useSuspenseQuery error handling is not obvious

[artem-malko]

Hey, it's me again with problems with useSuspenseQuery) Sorry)

So, I've tried to implement the most simple example of React-way any loading/error react-query state handling: https://stackblitz.com/edit/stackblitz-starters-pbafai

If you click button "up", there is 50% probability (before param became 10), that you get an error. After 10 you will get error every time. So, questions:

1. Checkout index.js, there is an event handler to catch unhandledrejection. And this handler catch a lot of unhandled rejections. I don't know, maybe it is a platform feature (I mean stackblitz, codesanbox is even worse).
2. After clicking to "reset" there is an error:

Error in /~/src/App.js (75:14)
Cannot read properties of undefined (reading 'map')

Looks like react-query tried to render <CompWithQuery /> with useSuspenseQuery, but there weren't any data. As it mentioned from docs, useSuspenseQuery have to throw a error, if data is undefined. But it is not true for my situation. Just can not understand, what have I done wrong?

3. Let's fix the code. Let's go to <CompWithQuery /> and upgrade data.map part:

     {data?.map((v) => (
        <div key={v}>{v}</div>
      ))}

In case of error, after clicking to "reset" there is no any requests, any renders — nothing, actually)

Looks like it is because of:

retry: false,
retryOnMount: false,

in the default options?

But this behaviour is really not obvious.

I don't know, may be we need a specific docs about loading/error handling in React-way with react-query? I mean specific defaults. May be something else.

[TkDodo]

don't set retryOnMount: false. It needs to be true so that there will be a refetch (and a re-suspend) when using error boundaries. What do you want to achieve by setting it to false ?

[artem-malko]

Hello again =)

What do you want to achieve by setting it to false ?

To prevent content blinking in case of repeated error.

1. Mount
2. Error
3. Refetch from Boundary and success response
4. Mount
5. Refetch with Error
6. Go to 3.

By the way, why do we have such flag in options, if this option has to be turned on?)

Pls, do not forget about 1 and 2 too)

[TkDodo]

To prevent content blinking in case of repeated error.

if you want to prevent stale content from being shown, you can do that with the isFetchedAfterMount flag.

- isFetchedAfterMount: boolean
  - Will be true if the query has been fetched after the component mounted.
  - This property can be used to not show any previously cached data.

By the way, why do we have such flag in options, if this option has to be turned on?)

It has to be turned on for suspense. We can remove it there from options.

Pls, do not forget about 1 and 2 too)

I think they are derived issues from 3. Please leave the retryOnMount flag alone okay and then everything should work.

[artem-malko]

@TkDodo 2 and 3 are resolved by retryOnMount, great. But 1 is not(

https://stackblitz.com/edit/stackblitz-starters-g6wnmx

I just can not understand, is it a react-query issue? I'll try to reproduce it locally.

[TkDodo]

this is a message from react:

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

I think this is just react logging all errors that go to a Boundary ? Have you tried this in a production build? Have you tried how error boundaries are logged by react when you throw an error during rendering to a boundary that doesn't involve react-query ? Please rule out everything else first ...

[artem-malko]

Looks like this error is thrown by react. Can not repeat in a local production mode.