noble-gold

how to force isLoading state for debugging?

👋 I have a typical component written like that:

const { isLoading } = useQuery(...);

if (isLoading) {
  return <Skeleton ... />;
}

return <ProperComponent ... />;

const { isLoading } = useQuery(...);

if (isLoading) {
  return <Skeleton ... />;
}

return <ProperComponent ... />;

I wanted to see if my Skeleton component looks properly during the loading state - is it possible to force it somehow? I haven't seen any option like that in react-query-devtools and when I forced isLoading state inside react-devtools, I get this error:

Unhandled Runtime Error
TypeError: observer.getOptimisticResult is not a function

Unhandled Runtime Error
TypeError: observer.getOptimisticResult is not a function

9 Replies

optimistic-gold•4y ago

Why not temporarily return the Skeleton instead of the Proper component to see it ?

noble-goldOP•4y ago

yeah, I eventually went with if (true || isLoading) inside the if - but I hoped there is a way that doesn't involve changing the code 😄

optimistic-gold•4y ago

Oh ok ! Usually I force a slower network to see the loads But it's not very comfortable to debug, even with no network at all you have to reload if you want ui change for example

noble-goldOP•4y ago

if I have a custom [isLoading, setIsLoading] = useState(); then I can flip the state using React devtools similarly to the open field here 👇

noble-goldOP•4y ago

unfortunately that doesn't work for react-query 😦

optimistic-gold•4y ago

Yes it's a shame 😢

like-gold•4y ago

Would be a nice feature for the devtools for sure!

noble-goldOP•4y ago

toggling 👇 isLoading results in the error I mentioned in the first message 😅

like-gold•4y ago

Getting some interactivity in there to force states, maybe even change data...

Gaming

Programming

how to force isLoading state for debugging?

Did you find this page helpful?