useQuery error response is always stale?

[RoryMacGregor88]

Hi, I've had a look through the discussions here and can't find anything specific to this, so hopefully someone here can shed some light on my problem.

The sandbox linked below illustrates my problem: I have a basic query that rejects the promise with an error if the response is not ok.

In the test, I'm returning a 500 status. which triggers the promise being rejected, as expected

I would imagine that this would set isError to true and populate the error object, but it does not.
Instead, isStale is true, and I can't work out why this would be the case when a successful request hasn't even been made yet.

Link to sandbox:

https://codesandbox.io/p/sandbox/exciting-heyrovsky-f5qo6y?file=%2Fsrc%2Ftest-hook.test.jsx%3A18%2C7

Any help would be greatly appreciated.

[TkDodo]

it's stale because queries that have no data are always considered stale.

The problem in your situation is automatic property tracking. We only track properties that you are using, which is a render optimization. In your example, you're only using the refetch value returned from useQuery and nothing else, so your hook doesn't re-render when new data / error comes in.

You can set notifyOnChangeProps: 'all' for your hook (or for the queryClient that you use for testing) to work around this.

But generally: This is one of the reasons why I'm not a fan of testing hooks in isolation. Rather test the component that is using the hook and you will test what your users are seeing.

here's a working fork of your sandbox (I've set it to 'all' globally): https://codesandbox.io/p/sandbox/trusting-star-hwcgwy?file=%2Fsrc%2Ftest-hook.test.jsx%3A4%2C1

[RoryMacGregor88]

Thanks for the quick response, it's given me a lot to go on. I agree that integration testing with the components that use the hooks is the best approach, and I do so, but I think your solution here will work great for testing these hooks in isolation. Thanks again, Rory.