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
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:
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
Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz
