powersync-js
powersync-js copied to clipboard
POC: Preloading queries
An issue with usePowerSyncWatchedQuery is that the initial render gets an empty array. Apart from not being able to distinguish between "loading" and "no results", there's no easy way to load the data before rendering the component.
To illustrate the issue, I added a 400ms delay to queries. Without this delay, you see a very brief flash, but it's difficult to show in a recording.
Some routers such as react-router supports "loaders", which can load content before navigating. This is a great place to load the initial query results, to get this:
The API for this is still a little tricky. The initial results need to be performed in a loader function, while the watching still happens in the component itself. This PR has a POC of a loading method that loads the initial query results, but additionally preserves the query itself for watching later.