Failing to integrate react-query devtool triggers with tanstack-router
Hi friends : D
I posted this question first on the tanstack-router question board and it was suggested I might have more luck here
I would like to be able to trigger the rendering of the errorComponents and pendingComponents by clicking on the corresponding triggers in the react-query dev tools but I'm getting mixed results.
Here's my simplified Codesandbox:
https://codesandbox.io/p/github/trevorfehrman/tanstack-router-example/main?import=true
I'm looking specifically at the load-todo route.tsx and index.tsx files. To reproduce, direct the browser to that route and open the react-query dev tools, and select the todo query.
Trigger Error:
This trigger successfully sets the status of the query to "error" and conditionally renders an element hidden behind the isError boolean, but it doesn't trigger the errorComponent. Throwing an error from the underlying query function does trigger a render of the errorComponent but only if it's defined in the route.tsx file and not the index.tsx file.
Question 1: Is it possible to use the react query dev tools to trigger the rendering of the errorComponent?
Question 2: Why do I have to define the errorComponent in the route file instead of the index file for a thrown error to trigger its rendering?
Trigger Loading:
Contrary to the Trigger Error button, the Trigger Loading button does trigger the rendering of the pendingComponent, even if it's defined in the index file. However, it doesn't appear possible to restore the loading state. It locks up the dev tools and I have to refresh the app (see gif).
Question: is there a way to restore the loading state to false from the dev tools without refreshing the page?
EDIT:
Here's a cleaner example thanks to the enormously helpful @Sean Cassiere
https://stackblitz.com/edit/github-osigxs?file=src/routes/load-todo/show-todo/index.tsx,src/routes/load-todo/index.tsx
StackBlitz
working query - StackBlitz
Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz
3 Replies
extended-salmon•2y ago
restore loading is definitely broken in a minimal sandbox, please file an issue:
https://stackblitz.com/edit/tanstack-query-2n5wqv?file=src%2Findex.jsx
trigger and restoer error seems to work fine, so we'd needt to find out what's different with the router integration
Dominik Dorfmeister
StackBlitz
Query Simple Example (forked) - StackBlitz
Run official live example code for Query Simple, created by Tanstack on StackBlitz
mute-goldOP•2y ago
Submitted:
https://github.com/TanStack/query/issues/7176
Regarding the router integration for triggering the error, I've tried a bunch of permutations but nothing I've tried seems to trigger the
ErrorBoundary. What's curious is the isError boolean definitely is updating correctly.GitHub
React Query devtools restore loading action doesn't restore loading...
Describe the bug When executing the Trigger Loading action in the devtools the query's status is successfully updated to "pending" and the nearest suspense boundary is successfully tr...
mute-goldOP•2y ago
trevorfehrman
StackBlitz
working query (forked) - StackBlitz
Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz