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:


