InstantDB & Tanstack Router Loaders
July 24th, 2025I’ve been playing with InstantDB and Tanstack Router recently.
InstantDB exposes a hook useQuery to fetch data, with a fairly typical { data, error, isLoading }
return value.
Using useQuery
directly in page components means that the component has to handle loading and error states directly, instead of using pendingComponent
and errorComponent
in the router.
One naive approach is to use db.queryOnce
inside a data loader.
This works, but means that the component will not be aware of any updates to the data—InstantDB’s most important feature.
Instead, we can combine db.queryOnce
and db.useQuery
to 1) fetch any initial data in the loader, and 2) use db.useQuery
to subscribe to updates in the component: