Infinite Scrolling

There are a few ways to accomplish infinite scrolling with PowerSync, either by querying data from the local SQLite database, or by lazy-loading or lazy-syncing data from your backend. Here is an overview of the different options with pros and cons:

​

1) Pre-sync all data and query the local database

PowerSync currently performs well with syncing up to 1,000,000 rows per client. This means that in many cases, you can sync a sufficient amount of data to let a user keep scrolling a list or feed that basically feels “infinite” to them.

​

2) Control data sync using subscription parameters

Use subscription parameters to subscribe to specific data on demand. For example, a client can subscribe to a specific “page” of data when the user scrolls to it. Each subscription is independent, so multiple tabs or views can subscribe with different parameters at the same time. Subscription parameters come from the client, so use them to select data, not for access control. Keep filtering by auth parameters such as auth.user_id(). Usage example: To lazy-load/lazy-sync data for infinite scrolling, you could split your data into ‘pages’ and use a subscription parameter to specify which pages to sync to a user.

​

3) Sync limited data and then load more data from an API

In this scenario we can sync a smaller number of rows to the user initially. If the user reaches the end of the page/feed/list, we make an online API call to load additional data from the backend to display to the user.

​

4) Client-side triggers a server-side function to flag data to sync

You could add a flag to certain records in your backend source database which are used by your Sync Streams to determine which records to sync to specific users. Then your app could make an API call which triggers a function that updates the flags on certain records, causing more records to be synced to the user.

​

Questions?

Ask on Discord if you need help implementing infinite scrolling.