powersync-js icon indicating copy to clipboard operation
powersync-js copied to clipboard

POC: Preloading queries

Open rkistner opened this issue 1 year ago • 0 comments

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.

Without Preloading

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:

With Preloading

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.

rkistner avatar Feb 28 '24 15:02 rkistner