JavaScript Web
Full SDK reference for using PowerSync in JavaScript Web clients
SDK Features
Provides real-time streaming of database changes.
Offers direct access to the SQLite database, enabling the use of SQL on both client and server sides.
Operations are asynchronous by default, ensuring the user interface remains unblocked.
Enables subscription to queries for receiving live updates.
Eliminates the need for client-side database migrations as these are managed automatically.
Allows using PowerSync between multiple tabs
Installation
See the SDK's README for installation instructions.
Some peer dependencies are required.
See the Readme for the necessary peer dependencies that need to be installed.
This SDK connects to a PowerSync instance via HTTP streams (enabled by default) or WebSocket.
When connecting via WebSocket, a polyfill is also required.
See the Developer Notes section below for details about connecting with either method.
Getting Started
Before implementing the PowerSync SDK in your project, make sure you have completed these steps:
1. Define the Schema
The first step is defining the schema for the local SQLite database.
This schema represents a "view" of the downloaded data. No migrations are required — the schema is applied directly when the local PowerSync database is constructed (as we'll show in the next step).
The types available are text
, integer
and real
. These should map directly to the values produced by the Sync Rules. If a value doesn't match, it is cast automatically. For details on how Postgres types are mapped to the types below, see the section on Types in the Sync Rules documentation.
Example:
Note: No need to declare a primary key id
column, as PowerSync will automatically create this.
2. Instantiate the PowerSync Database
Next, you need to instantiate the PowerSync database — this is the core managed database.
Its primary functions are to record all changes in the local database, whether online or offline. In addition, it automatically uploads changes to your app backend when connected.
Example:
SDK versions lower than 1.2.0
In SDK versions lower than 1.2.0, you will need to use the deprecated WASQLitePowerSyncDatabaseOpenFactory
syntax to instantiate the database.
Once you've instantiated your PowerSync database, you will need to call the connect()
method to activate it.
3. Integrate with your Backend
The PowerSync backend connector provides the connection between your application backend and the PowerSync client-slide managed SQLite database.
It is used to:
Retrieve an auth token to connect to the PowerSync instance.
Apply local changes on your backend application server (and from there, to Postgres)
Accordingly, the connector must implement two methods:
PowerSyncBackendConnector.fetchCredentials
- This is called every couple of minutes and is used to obtain credentials for your app backend API. -> See Authentication Setup for instructions on how the credentials should be generated.PowerSyncBackendConnector.uploadData
- Use this to upload client-side changes to your app backend.-> See Writing Client Changes for considerations on the app backend implementation.
Example:
Using PowerSync: CRUD functions
Once the PowerSync instance is configured you can start using the SQLite DB functions.
The most commonly used CRUD functions to interact with your SQLite data are:
PowerSyncDatabase.get
- get (SELECT) a single row from a table.PowerSyncDatabase.getAll
- get (SELECT) a set of rows from a table.PowerSyncDatabase.watch
- execute a read query every time source tables are modified.PowerSyncDatabase.execute
- execute a write (INSERT/UPDATE/DELETE) query.
Fetching a Single Item
The get
method executes a read-only (SELECT) query and returns a single result. It throws an exception if no result is found. Use getOptional
to return a single optional result (returns null
if no result is found).
Querying Items (PowerSync.getAll)
The getAll
method returns a set of rows from a table.
Watching Queries (PowerSync.watch)
The watch
method executes a read query whenever a change to a dependent table is made.
Mutations (PowerSync.execute, PowerSync.writeTransaction)
The execute
method can be used for executing single SQLite write statements.
Additional Usage Examples
See Usage Examples for further examples of the SDK.
Developer Notes
Connecting via HTTP Streams or WebSocket
This SDK connects to a PowerSync instance and streams sync commands via HTTP streams (enabled by default) or WebSockets.
The WebSocket implementation uses reactive socket streams from the cross-platform RSocket library. This allows the client to request commands from the server after processing existing events, alleviating any back-pressure build-up of commands. Sync commands are transmitted as BSON (binary) documents.
Benefits of using the WebSocket Method
BLOB column support will be added on top of the WebSocket implementation (the HTTP streaming method will not support this).
Selecting Connection Method
The PowerSyncDatabase
client's connect
method now supports options which can be used to select the active connection method. These options
are not required, as HTTP is used by default.
ORM Support
See JavaScript ORM Support for details.
Source Code
To access the source code for this SDK, refer to packages/web in the powersync-js repo on GitHub.
Troubleshooting
See Troubleshooting for pointers to debug common issues.
Last updated