TanStack
vue-query suspense always throws render errors
Describe the bug
I am using vue-query in SSR with suspense. I expected fetch errors to be serialized into error as described in https://tanstack.com/query/v5/docs/vue/guides/query-functions#handling-and-throwing-errors. Instead, a fetch error causes a render error. I set throwOnError: false according to https://tanstack.com/query/v5/docs/vue/reference/useQuery#~:text=throwOnError:~:text=non%2Dserializable%20values.-,throwOnError but the composable still throws a render error.
This behavior is by design according to https://github.com/TanStack/query/issues/5920#issuecomment-1695821107, but unlike React, Vue's Suspense is not an error boundary, see https://vuejs.org/guide/built-ins/suspense.html#error-handling, so this behavior is problematic.
Edit: #5976 describes the same problem for Nuxt and a workaround is described in https://github.com/TanStack/query/discussions/5688#discussioncomment-6652179.
I created a minimal reproducible example which demonstrates that a query always triggers an uncaught error when data is loaded via suspense.
Your minimal, reproducible example
https://codesandbox.io/p/devbox/rough-sky-xlvpwl
Steps to reproduce
- Open the codesandbox and wait until the app is compiled
- The alert appears, showing that the component has thrown an uncaught error
Expected behavior
There should be an option to prevent errors being thrown when loading data via suspense()
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
all platforms, see codesandbox
Tanstack Query adapter
vue-query
TanStack Query version
v4.8.4, v5.13.4, v15.15.0
TypeScript version
No response
Additional context
No response
