From 23a5c734ddb07c701e5bcc5c48b08d474a035ffd Mon Sep 17 00:00:00 2001 From: Garry Hill Date: Mon, 31 Oct 2022 11:29:26 +0000 Subject: [PATCH 1/8] fix browser example configuration --- web/electric-config.js | 1 + web/src/worker.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/web/electric-config.js b/web/electric-config.js index b475fea..a979462 100644 --- a/web/electric-config.js +++ b/web/electric-config.js @@ -1,5 +1,6 @@ const config = { app: "example-app", + env: "test", replication: { address: "localhost", port: 5133, diff --git a/web/src/worker.js b/web/src/worker.js index bae27eb..2edbc0f 100644 --- a/web/src/worker.js +++ b/web/src/worker.js @@ -2,4 +2,4 @@ import { ElectricWorker } from 'electric-sql/browser' import { data } from "../migrations"; import config from "../electric-config"; -ElectricWorker.start(self, { config, migrations: data.migrations }); \ No newline at end of file +ElectricWorker.start(self, { ...config, migrations: data.migrations }); From 5659ea48fe62723dc90d9278415049bd2d74ca2f Mon Sep 17 00:00:00 2001 From: Garry Hill Date: Mon, 31 Oct 2022 12:20:30 +0000 Subject: [PATCH 2/8] update configuration for react-native and expo --- expo/electric-config.js | 1 + expo/src/Example.tsx | 2 +- react-native/electric-config.js | 1 + react-native/src/Example.tsx | 2 +- 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/expo/electric-config.js b/expo/electric-config.js index b475fea..a979462 100644 --- a/expo/electric-config.js +++ b/expo/electric-config.js @@ -1,5 +1,6 @@ const config = { app: "example-app", + env: "test", replication: { address: "localhost", port: 5133, diff --git a/expo/src/Example.tsx b/expo/src/Example.tsx index 62cf8cb..78a8570 100644 --- a/expo/src/Example.tsx +++ b/expo/src/Example.tsx @@ -19,7 +19,7 @@ export const ElectrifiedExample = () => { useEffect(() => { const init = async () => { const original = SQLite.openDatabase('example.db') as unknown as Database; - const opts = {config, migrations: data.migrations} + const opts = {...config, migrations: data.migrations} const electrified = await electrify(original, opts) setDb(electrified) diff --git a/react-native/electric-config.js b/react-native/electric-config.js index 9c575b1..da2c4b8 100644 --- a/react-native/electric-config.js +++ b/react-native/electric-config.js @@ -1,5 +1,6 @@ const config = { app: 'example-app', + env: 'test', replication: { address: 'localhost', port: 5133, diff --git a/react-native/src/Example.tsx b/react-native/src/Example.tsx index 84192ad..8c92f35 100644 --- a/react-native/src/Example.tsx +++ b/react-native/src/Example.tsx @@ -21,7 +21,7 @@ export const ElectrifiedExample = () => { useEffect(() => { const init = async () => { const original = await SQLite.openDatabase({name: 'example.db'}) as unknown as Database; - const opts = {config, migrations: data.migrations} + const opts = {...config, migrations: data.migrations} const electrified = await electrify(original, promisesEnabled, opts) setDb(electrified) From ff2341d32ad9d0eae70ead46f1e3175b699e3709 Mon Sep 17 00:00:00 2001 From: Garry Hill Date: Tue, 1 Nov 2022 09:09:39 +0000 Subject: [PATCH 3/8] put token into configurations --- expo/electric-config.js | 1 + react-native/electric-config.js | 1 + web/electric-config.js | 1 + 3 files changed, 3 insertions(+) diff --git a/expo/electric-config.js b/expo/electric-config.js index a979462..e1fca43 100644 --- a/expo/electric-config.js +++ b/expo/electric-config.js @@ -1,6 +1,7 @@ const config = { app: "example-app", env: "test", + token: 'my-token', replication: { address: "localhost", port: 5133, diff --git a/react-native/electric-config.js b/react-native/electric-config.js index da2c4b8..571a425 100644 --- a/react-native/electric-config.js +++ b/react-native/electric-config.js @@ -1,6 +1,7 @@ const config = { app: 'example-app', env: 'test', + token: 'my-token', replication: { address: 'localhost', port: 5133, diff --git a/web/electric-config.js b/web/electric-config.js index a979462..630fd60 100644 --- a/web/electric-config.js +++ b/web/electric-config.js @@ -1,6 +1,7 @@ const config = { app: "example-app", env: "test", + token: "my-token", replication: { address: "localhost", port: 5133, From 7dc21e7abc1a5305271d372e0d98b4e729201286 Mon Sep 17 00:00:00 2001 From: Garry Hill Date: Tue, 1 Nov 2022 09:10:14 +0000 Subject: [PATCH 4/8] include env in readme --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index baad0a6..0e84a59 100644 --- a/README.md +++ b/README.md @@ -32,11 +32,12 @@ As a local-first system, ElectricSQL defaults to working without a backend. So y ### Using the ElectricSQL service -The simplest way to configure a backend is to [sign up to ElectricSQL](https://console.electric-sql.com/auth/signup) and create an application. This will give you a globally unique `app` slug. Paste this into your [application config](https://electric-sql.com/docs/usage/configure), which in these examples is typically defined in an `electric-config.js` file in the root of the example folder, e.g.: +The simplest way to configure a backend is to [sign up to ElectricSQL](https://console.electric-sql.com/auth/signup) and create an application. This will give you a globally unique `app` slug and an environment name. Paste this into your [application config](https://electric-sql.com/docs/usage/configure), which in these examples is typically defined in an `electric-config.js` file in the root of the example folder, e.g.: ```js const config = { app: '', + env: '', // ... other configuration options ... }; ``` From 87da22c682ba7945395bbf19f71f0dfb5b01d3ee Mon Sep 17 00:00:00 2001 From: Garry Hill Date: Tue, 1 Nov 2022 09:12:06 +0000 Subject: [PATCH 5/8] move configuration into opendatabase call --- web/src/App.tsx | 5 ++++- web/src/worker.js | 4 +--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index 986cec5..105dff5 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -5,6 +5,8 @@ import './style.css' import { initElectricSqlJs, ElectrifiedDatabase} from "electric-sql/browser" import { ElectricProvider, useElectric, useElectricQuery } from 'electric-sql/react' +import config from '../electric-config' +import { data as migrations } from "../migrations"; const worker = new Worker("./worker.js", { type: "module" }); @@ -14,7 +16,8 @@ export const ElectrifiedExample = () => { useEffect(() => { const init = async () => { const SQL = await initElectricSqlJs(worker, {locateFile: (file: string) => `/${file}`}) - const electrified = await SQL.openDatabase('example.db') + const conf = {...config, migrations: migrations.migrations} + const electrified = await SQL.openDatabase('example.db', conf) setDb(electrified) } diff --git a/web/src/worker.js b/web/src/worker.js index 2edbc0f..0474e23 100644 --- a/web/src/worker.js +++ b/web/src/worker.js @@ -1,5 +1,3 @@ import { ElectricWorker } from 'electric-sql/browser' -import { data } from "../migrations"; -import config from "../electric-config"; -ElectricWorker.start(self, { ...config, migrations: data.migrations }); +ElectricWorker.start(self); From be9afd074fba860c14aa08e99e4aabe89f4d2487 Mon Sep 17 00:00:00 2001 From: Garry Hill Date: Wed, 9 Nov 2022 11:49:03 +0000 Subject: [PATCH 6/8] integrate migrations into config import --- expo/electric-config.js | 3 +++ expo/src/Example.tsx | 5 +---- react-native/electric-config.js | 3 +++ react-native/src/Example.tsx | 4 +--- web/electric-config.js | 3 +++ web/src/App.tsx | 4 +--- 6 files changed, 12 insertions(+), 10 deletions(-) diff --git a/expo/electric-config.js b/expo/electric-config.js index e1fca43..24489ec 100644 --- a/expo/electric-config.js +++ b/expo/electric-config.js @@ -1,3 +1,5 @@ +import {data} from './migrations'; + const config = { app: "example-app", env: "test", @@ -6,6 +8,7 @@ const config = { address: "localhost", port: 5133, }, + migrations: data.migrations }; export default config; diff --git a/expo/src/Example.tsx b/expo/src/Example.tsx index 78a8570..252c43d 100644 --- a/expo/src/Example.tsx +++ b/expo/src/Example.tsx @@ -9,8 +9,6 @@ import {Database, ElectrifiedDatabase, electrify} from 'electric-sql/expo'; import {ElectricProvider, useElectric, useElectricQuery} from 'electric-sql/react'; import {styles} from './Styles'; - -import {data} from '../migrations'; import config from '../electric-config'; export const ElectrifiedExample = () => { @@ -19,9 +17,8 @@ export const ElectrifiedExample = () => { useEffect(() => { const init = async () => { const original = SQLite.openDatabase('example.db') as unknown as Database; - const opts = {...config, migrations: data.migrations} - const electrified = await electrify(original, opts) + const electrified = await electrify(original, config) setDb(electrified) } diff --git a/react-native/electric-config.js b/react-native/electric-config.js index 571a425..b349b43 100644 --- a/react-native/electric-config.js +++ b/react-native/electric-config.js @@ -1,3 +1,5 @@ +import {data} from './migrations'; + const config = { app: 'example-app', env: 'test', @@ -6,6 +8,7 @@ const config = { address: 'localhost', port: 5133, }, + migrations: data.migrations }; export default config; diff --git a/react-native/src/Example.tsx b/react-native/src/Example.tsx index 8c92f35..2241180 100644 --- a/react-native/src/Example.tsx +++ b/react-native/src/Example.tsx @@ -10,7 +10,6 @@ import {ElectricProvider, useElectric, useElectricQuery} from 'electric-sql/reac import {styles} from './Styles'; import config from '../electric-config'; -import {data} from '../migrations'; const promisesEnabled = true; SQLite.enablePromise(promisesEnabled); @@ -21,9 +20,8 @@ export const ElectrifiedExample = () => { useEffect(() => { const init = async () => { const original = await SQLite.openDatabase({name: 'example.db'}) as unknown as Database; - const opts = {...config, migrations: data.migrations} - const electrified = await electrify(original, promisesEnabled, opts) + const electrified = await electrify(original, promisesEnabled, config) setDb(electrified) } diff --git a/web/electric-config.js b/web/electric-config.js index 630fd60..a01471e 100644 --- a/web/electric-config.js +++ b/web/electric-config.js @@ -1,3 +1,5 @@ +import { data } from "./migrations"; + const config = { app: "example-app", env: "test", @@ -6,6 +8,7 @@ const config = { address: "localhost", port: 5133, }, + migrations: data.migrations }; export default config; diff --git a/web/src/App.tsx b/web/src/App.tsx index 105dff5..c7154fc 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -6,7 +6,6 @@ import './style.css' import { initElectricSqlJs, ElectrifiedDatabase} from "electric-sql/browser" import { ElectricProvider, useElectric, useElectricQuery } from 'electric-sql/react' import config from '../electric-config' -import { data as migrations } from "../migrations"; const worker = new Worker("./worker.js", { type: "module" }); @@ -16,8 +15,7 @@ export const ElectrifiedExample = () => { useEffect(() => { const init = async () => { const SQL = await initElectricSqlJs(worker, {locateFile: (file: string) => `/${file}`}) - const conf = {...config, migrations: migrations.migrations} - const electrified = await SQL.openDatabase('example.db', conf) + const electrified = await SQL.openDatabase('example.db', config) setDb(electrified) } From 0153777b29da608743edd260a8dd20d8e5a2feef Mon Sep 17 00:00:00 2001 From: Garry Hill Date: Wed, 9 Nov 2022 14:11:16 +0000 Subject: [PATCH 7/8] add clientId to metadata migrations --- expo/migrations/1666288242_init/satellite.sql | 2 +- expo/migrations/index.js | 2 +- react-native/migrations/1666288242_init/satellite.sql | 2 +- react-native/migrations/index.js | 2 +- web/migrations/1666288242_init/satellite.sql | 2 +- web/migrations/index.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/expo/migrations/1666288242_init/satellite.sql b/expo/migrations/1666288242_init/satellite.sql index bf65ecf..8e2040e 100644 --- a/expo/migrations/1666288242_init/satellite.sql +++ b/expo/migrations/1666288242_init/satellite.sql @@ -34,7 +34,7 @@ CREATE TABLE IF NOT EXISTS _electric_migrations ( ); -- Initialisation of the metadata table -INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='); +INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', ''); -- These are toggles for turning the triggers on and off diff --git a/expo/migrations/index.js b/expo/migrations/index.js index b1210a2..21544f7 100644 --- a/expo/migrations/index.js +++ b/expo/migrations/index.js @@ -5,7 +5,7 @@ export const data = { "-- The ops log table\nCREATE TABLE IF NOT EXISTS _electric_oplog (\n rowid INTEGER PRIMARY KEY AUTOINCREMENT,\n namespace String NOT NULL,\n tablename String NOT NULL,\n optype String NOT NULL,\n primaryKey String NOT NULL,\n newRow String,\n oldRow String,\n timestamp TEXT\n);", "-- Somewhere to keep our metadata\nCREATE TABLE IF NOT EXISTS _electric_meta (\n key TEXT,\n value BLOB\n);", "-- Somewhere to track migrations\nCREATE TABLE IF NOT EXISTS _electric_migrations (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL UNIQUE,\n sha256 TEXT NOT NULL,\n applied_at TEXT NOT NULL\n);", - "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA==');", + "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', '');", "-- These are toggles for turning the triggers on and off\nDROP TABLE IF EXISTS _electric_trigger_settings;", "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);" ], diff --git a/react-native/migrations/1666288242_init/satellite.sql b/react-native/migrations/1666288242_init/satellite.sql index bf65ecf..8e2040e 100644 --- a/react-native/migrations/1666288242_init/satellite.sql +++ b/react-native/migrations/1666288242_init/satellite.sql @@ -34,7 +34,7 @@ CREATE TABLE IF NOT EXISTS _electric_migrations ( ); -- Initialisation of the metadata table -INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='); +INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', ''); -- These are toggles for turning the triggers on and off diff --git a/react-native/migrations/index.js b/react-native/migrations/index.js index b1210a2..21544f7 100644 --- a/react-native/migrations/index.js +++ b/react-native/migrations/index.js @@ -5,7 +5,7 @@ export const data = { "-- The ops log table\nCREATE TABLE IF NOT EXISTS _electric_oplog (\n rowid INTEGER PRIMARY KEY AUTOINCREMENT,\n namespace String NOT NULL,\n tablename String NOT NULL,\n optype String NOT NULL,\n primaryKey String NOT NULL,\n newRow String,\n oldRow String,\n timestamp TEXT\n);", "-- Somewhere to keep our metadata\nCREATE TABLE IF NOT EXISTS _electric_meta (\n key TEXT,\n value BLOB\n);", "-- Somewhere to track migrations\nCREATE TABLE IF NOT EXISTS _electric_migrations (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL UNIQUE,\n sha256 TEXT NOT NULL,\n applied_at TEXT NOT NULL\n);", - "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA==');", + "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', '');", "-- These are toggles for turning the triggers on and off\nDROP TABLE IF EXISTS _electric_trigger_settings;", "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);" ], diff --git a/web/migrations/1666288242_init/satellite.sql b/web/migrations/1666288242_init/satellite.sql index bf65ecf..8e2040e 100644 --- a/web/migrations/1666288242_init/satellite.sql +++ b/web/migrations/1666288242_init/satellite.sql @@ -34,7 +34,7 @@ CREATE TABLE IF NOT EXISTS _electric_migrations ( ); -- Initialisation of the metadata table -INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='); +INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', ''); -- These are toggles for turning the triggers on and off diff --git a/web/migrations/index.js b/web/migrations/index.js index b1210a2..21544f7 100644 --- a/web/migrations/index.js +++ b/web/migrations/index.js @@ -5,7 +5,7 @@ export const data = { "-- The ops log table\nCREATE TABLE IF NOT EXISTS _electric_oplog (\n rowid INTEGER PRIMARY KEY AUTOINCREMENT,\n namespace String NOT NULL,\n tablename String NOT NULL,\n optype String NOT NULL,\n primaryKey String NOT NULL,\n newRow String,\n oldRow String,\n timestamp TEXT\n);", "-- Somewhere to keep our metadata\nCREATE TABLE IF NOT EXISTS _electric_meta (\n key TEXT,\n value BLOB\n);", "-- Somewhere to track migrations\nCREATE TABLE IF NOT EXISTS _electric_migrations (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL UNIQUE,\n sha256 TEXT NOT NULL,\n applied_at TEXT NOT NULL\n);", - "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA==');", + "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', '');", "-- These are toggles for turning the triggers on and off\nDROP TABLE IF EXISTS _electric_trigger_settings;", "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);" ], From 7f7e9e3fd0a3bb03ead53f181317ff74468c629a Mon Sep 17 00:00:00 2001 From: Garry Hill Date: Thu, 1 Dec 2022 10:43:12 +0000 Subject: [PATCH 8/8] include fake user_id in connect configuration --- web/src/App.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/src/App.tsx b/web/src/App.tsx index c7154fc..8cd63b2 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -8,6 +8,7 @@ import { ElectricProvider, useElectric, useElectricQuery } from 'electric-sql/re import config from '../electric-config' const worker = new Worker("./worker.js", { type: "module" }); +const user_id = "shared-user-id" export const ElectrifiedExample = () => { const [ db, setDb ] = useState() @@ -15,7 +16,7 @@ export const ElectrifiedExample = () => { useEffect(() => { const init = async () => { const SQL = await initElectricSqlJs(worker, {locateFile: (file: string) => `/${file}`}) - const electrified = await SQL.openDatabase('example.db', config) + const electrified = await SQL.openDatabase('example.db', {...config, token: user_id}) setDb(electrified) }