`useSuspenseQuery` doesn't throwOnError when used with `refetchInterval`

[misoguy]

Describe the bug

useSuspenseQuery doesn't throwOnError when used with refetchInterval and the queryFn throws after one successful execution

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/jovial-engelbart-7fxq5c

Steps to reproduce

useSuspenseQuery doesn't throwOnError when used with refetchInterval and the queryFn throws after one successful execution.
Can be seen from the mininmal reproducible example

Expected behavior

useSuspenseQuery throws to ErrorBoundary when queryFn throws an error after the first successful execution.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

All Platform

Tanstack Query adapter

None

TanStack Query version

v5.66.9

TypeScript version

No response

Additional context

also: data is always kept between refetches of the same queryKey. It's just that if you have no data, we go back to a hard loading state. That is per design. data is kept (stale while revalidate refers to showing stale data), errors are not.

#6290 (comment)

throwOnError: query => query.state.data !== undefined

#8591 (comment)
https://github.com/TanStack/query/blob/main/packages/react-query/src/suspense.ts#L11-L19

[TkDodo]

You already know it's per design, so I don't understand why you'd open an issue? It's also documented how you can achieve the behavior you want:

https://tanstack.com/query/v5/docs/framework/react/guides/suspense#throwonerror-default

[misoguy]

Thanks for the fast response, I'm curious to know the reasoning behind this decision.

Not all errors are thrown to the nearest Error Boundary per default - we're only throwing errors if there is no other data to show

Also, the example code written in the documentation that you provided is frankly quite verbose to write it inside the rendering phase every time a query is used.

import { useSuspenseQuery } from '@tanstack/react-query'

const { data, error, isFetching } = useSuspenseQuery({ queryKey, queryFn })

if (error && !isFetching) {
  throw error
}

// continue rendering data

When is it viable to show stale data when the queryFn itself threw an error?
It would be most helpful to understand how to use react-query better if you could guide me to any kind of discussion or documentation behind why this design decision was made.

Thank you for all the work that you put into making this library great 👍

[TkDodo]

When is it viable to show stale data when the queryFn itself threw an error?

In my book, pretty much always?

Imagine you fetch a blogpost, display it and the user reads it. Then they go away for a bit, get an automatic refetch when they come back, and it errors because they have a flaky network or the server is temporarily down or whatever. Would you want to unmount the perfectly good blogpost they want to read in order to show a big fat error screen?

Or would you rather just maybe show a small toast notification and let them continue to explore the data they have already successfully fetched ...

---

I know there are use-cases to always throw, too. The problem is you can’t achieve the described UX if we always throw, but you can achieve it the other way around as you can always throw yourself.