Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

electric-sql

Package Overview
Dependencies
Maintainers
2
Versions
239
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

electric-sql

ElectricSQL TypeScript client for developing local-first SQL apps. Supports JavaScript based mobile, web and edge applications.

  • 0.4.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
167
increased by28.46%
Maintainers
2
Weekly downloads
 
Created
Source
ElectricSQL logo

GitHub npm Tests

ElectricSQL Typescript Client

ElectricSQL is a local-first SQL system. It provides active-active cloud sync for embedded SQLite databases and a reactive programming model to bind components to live database queries.

The ElectricSQL Typescript Client is the main ElectricSQL client library for developing node, web and JavaScript-based mobile applications. It's designed to work with any SQLite driver or bindings, with convienience functions to integrate with the most popular ones, including the primary drivers for Expo, React Native, SQL.js and Node.js.

See the:

Install

Using yarn:

yarn add electric-sql

Or using npm:

npm install --save electric-sql

Usage

Instantiate and use your SQLite driver as normal and call electrify when opening a new database connection. For example using react-native-sqlite-storage:

import { configure } from 'electric-sql/config'
import { electrify } from 'electric-sql/react-native'

// Import your SQLite driver
import SQLite from 'react-native-sqlite-storage'
SQLite.enablePromise(true)

// Configure your app and migrations
import app from './electric.json'
import migrations from './migrations/dist'
const config = configure(app, migrations)

// Open an SQLite database connection
const original = await SQLite.openDatabase('example.db')

// ⚡ Electrify it
const db = electrify(original, config)

// Use as normal, e.g.:
db.transaction((tx) => tx.executeSql('SELECT 1'))

Using in the web browser

Electric uses SQL.js in the browser with absurd-sql for persistence. This runs in a web worker (which we also use to keep background replication off the main thread). As a result, the electrified db client provides an asynchronous version of a subset of the SQL.js driver interface.

First create a worker.js file that imports and starts an ElectricWorker process:

import { ElectricWorker } from 'electric-sql/browser'

ElectricWorker.start(self)

Then, in your main application:

import { initElectricSqlJs } from 'electric-sql/browser'

// Configure your app and migrations
import app from './electric.json'
import migrations from './migrations/dist'
const config = configure(app, migrations)

// Start the background worker
const url = new URL('./worker.js', import.meta.url)
const worker = new Worker(url, { type: 'module' })

// Electrify the SQL.js / absurd-sql machinery
const SQL = await initElectricSqlJs(worker, {
  locateFile: (file) => `/${file}`,
})

// Open a named database connection
const db = await SQL.openDatabase('example.db', config)

This gives you persistent, local-first SQL with active-active replication in your web browser 🤯. Use the db client as normal, with the proviso that the methods are now async (they return promises rather than direct values).

See the Quickstart guide for more information.

Reactivity

Once electrified, you can bind live database queries to your reactive components, so they automatically update when data changes or comes in over the replication stream. For example:

import React from 'react'
import { Pressable, Text, View } from 'react-native'

import { useElectric, useElectricQuery } from 'electric-sql/react'

export const LiveComponent = () => {
  const db = useElectric()
  const { results } = useElectricQuery('SELECT value FROM items')

  const addItem = () => {
    sql.execute('INSERT INTO items VALUES(?)', [crypto.randomUUID()])
  }

  return (
    <View>
      {results.map((item, index) => (
        <Text key={index}>Item: {item.value}</Text>
      ))}

      <Pressable onPress={addItem}>
        <Text>Add</Text>
      </Pressable>
    </View>
  )
}

See the Reactivity guide for more information.

Issues

Please raise any bugs, issues and feature requests on GitHub Issues.

Contributing

See the Community Guidelines including the Guide to Contributing and Contributor License Agreement.

Support

We have an open community Discord. If you’re interested in the project, please come and say hello and let us know if you have any questions or need any help or support getting things running.

Keywords

FAQs

Package last updated on 23 Jan 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc