Question: useQuery and async

[netheril96]

The definition of useQuery seemingly converts asynchronous functions into a synchronous one. How does that work? Does it cause blocking in frontend? How to access the promise instead?

[flybayer]

Good question! The short answer is because it use React Suspense (concurrent mode).

So while the network request is inflight, it triggers suspense which wall cause the fallback component on the nearest <Suspense fallback={/*stuff*/}> component.

So the component render basically stops at the useQuery call until the promise is resolved. Once resolved, then the component will fully render.

Does that makes sense?

[netheril96]

It does make sense, but it seems too magical for me. What if I just want to call the query as a normal async function? Does blitz rewrite that into a network call, just like with mutations (https://blitzjs.com/docs/mutation-usage)?

[flybayer]

Yeah you can totally do that too. You can manually call queries just like mutations.

const res = await getProducts()

[flybayer]

useQuery definitely does a ton of stuff for you that can make it seem a bit magical. It handles caching, cache invalidation, auto refetching if you leave the tab and come back to it, etc. It also gives you ability to do stuff like polling.