@journeyapps/powersync-sdk-web v0.0.0-dev-20231113093941

PowerSync SDK for Web

PowerSync is a service and set of SDKs that keeps Postgres databases in sync with on-device SQLite databases. See a summary of features here.

Alpha Release

This React Native SDK package is currently in an alpha release.

Installation

Install Package

npm install @journeyapps/powersync-sdk-web

Install Peer Dependency: WA-SQLite

This SDK currently requires @journeyapps/wa-sqlite as a peer dependency.

Install it in your app with:

npm install @journeyapps/wa-sqlite

Logging

This package uses js-logger for logging.

Enable JS Logger with your logging interface of choice or use the default console

import { Logger } from 'js-logger';

// Log messages will be written to the window's console.
Logger.useDefaults();

Enable verbose output in the developer tools for detailed logs.

The WASQLite DB Adapter opens SQLite connections inside a shared webworker. This worker can be inspected in Chrome by accessing

chrome://inspect/#workers

Getting Started

See our Docs for detailed instructions.

import {
  Column,
  ColumnType,
  RNQSPowerSyncDatabaseOpenFactory,
  Schema,
  Table
} from '@journeyapps/powersync-sdk-web';

export const AppSchema = new Schema([
  new Table({ name: 'customers', columns: [new Column({ name: 'name', type: ColumnType.TEXT })] })
]);

let PowerSync;

export const openDatabase = async () => {
  const PowerSync = new WASQLitePowerSyncDatabaseOpenFactory({
    schema: AppSchema,
    dbFilename: 'test.sqlite'
  }).getInstance();

  await PowerSync.init();

  // Run local statements.
  await PowerSync.execute('INSERT INTO customers(id, name) VALUES(uuid(), ?)', ['Fred']);
};

class Connector {
  async fetchCredentials() {
    // TODO logic to fetch a session
    return {
      endpoint: '[The PowerSync instance URL]',
      token: 'An authentication token',
      expiresAt: 'When the token expires',
      userID: 'User ID to associate the session with'
    };
  }

  async uploadData(database) {
    // Upload local changes to backend, see docs for example
  }
}

export const connectPowerSync = async () => {
  const connector = new Connector(); // Which was declared above
  await PowerSync.connect(connector);
};

React hooks are available in the @journeyapps/powersync-react package

Refer to our full documentation to learn more.