File: README.md
ElectricSQL Examples
This repo contains example applications illustrating how to use ElectricSQL with various drivers and frameworks.
See the sub folders for the actual applications. These include:
- expo — example mobile app using Expo with the expo-sqlite driver
- react-native — example mobile app using React Native with the react-native-sqlite-storage driver
- web — a simple web application using ElectricSQL in the browser with wa-sqlite
Running the examples
Each example has usage instructions in the README.md.
See the docs for more information on how to run the backend locally.
More information
See the documentation and community guidelines. If you need help let us know on Discord.
File: expo/README.md
ElectricSQL - Expo example
This is an example mobile app using Expo with the expo-sqlite driver.
Pre-reqs
See the Expo installation docs.
Install
Clone this repo and change directory into this folder:
git clone https://github.com/electric-sql/examples
cd examples/expoInstall the dependencies:
yarnRun
Run in the Android simulator:
yarn androidRun in the iOS simulator:
yarn iosSync
The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on how to run the backend locally.
Notes on the code
The main code to look at is in ./src/Example.tsx.
export const ElectrifiedExample = () => {
const [db, setDb] = useState<ElectrifiedDatabase>();
useEffect(() => {
const init = async () => {
const original = SQLite.openDatabase('example.db');
const db = await electrify(original, config)
setDb(db)
}
init();
}, []);
if (db === null) {
return null
}
return (
<ElectricProvider db={db}>
<Example />
</ElectricProvider>
);
};This opens an electrified database client and passes it to the application using the React Context API. Components can then use the useElectric and useElectricQuery to access the database client and bind reactive queries to the component state.
const ExampleComponent = () => {
const {results, error} = useElectricQuery('SELECT value FROM items', []);
const db = useElectric() as ElectrifiedDatabase;
if (error !== undefined) {
return (
<View>
<Text style={styles.item}>Error: {`${error}`}</Text>
</View>
);
}
if (results === undefined) {
return null;
}
const addItem = () => {
db.transaction(tx => {
tx.executeSql('INSERT INTO items VALUES(?)', [uuidv4()]);
});
};
const clearItems = async () => {
db.transaction(tx => {
tx.executeSql('DELETE FROM items where true', undefined);
});
};
return (
<View>
{results.map((item, index) => (
<Text key={index} style={styles.item}>
Item: {item.value}
</Text>
))}
<Text style={styles.text}>Add</Text>
<Text style={styles.text}>Clear</Text>
</View>
);
};More information
See the documentation and community guidelines. If you need help let us know on Discord.
File: quickstart/README.md
ElectricSQL - Quickstart
This is an example web application using ElectricSQL in the browser with React and SQL.js. It's designed to accompany the Quickstart guide in the ElectricSQL documentation.
Usage
Follow the instructions on the default path of the Quickstart guide and see the comments in (and alternative versions of) src/Example.tsx.
More information
See the documentation and community guidelines. If you need help let us know on Discord.
File: react-native/README.md
ElectricSQL - React Native example
This is an example mobile app using React Native with the react-native-sqlite-storage driver.
Pre-reqs
See the React Native CLI Quickstart section at reactnative.dev/docs/environment-setup.
Install
Clone this repo and change directory into this folder:
git clone https://github.com/electric-sql/examples
cd examples/react-nativeInstall the dependencies:
yarnInstall the pods:
cd ios && pod install && cd ..You may want to also check the install section of the react-native-sqlite-storage driver README.
Run
Run in the Android simulator:
yarn androidRun in the iOS simulator:
yarn iosOr open in Xcode:
open ios/ElectricSQLExample.xcworkspaceSync
The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on how to run the backend locally.
Notes on the code
The main code to look at is in ./src/Example.tsx.
export const ElectrifiedExample = () => {
const [db, setDb] = useState<ElectrifiedDatabase>();
useEffect(() => {
SQLite.openDatabase('example.db')
.then((db: Database) => electrify(db, promisesEnabled, config))
.then((db: ElectrifiedDatabase) => setDb(db))
}, []);
if (db === undefined) {
return null
}
return (
<ElectricProvider db={db}>
<Example />
</ElectricProvider>
);
};This pens an electrified database client and passes it to the application using the React Context API. Components can then use the useElectric and useElectricQuery to access the database client and bind reactive queries to the component state.
const ExampleComponent = () => {
const {results, error} = useElectricQuery('SELECT value FROM items', []);
const db = useElectric() as ElectrifiedDatabase;
if (error !== undefined) {
return (
<View>
<Text style={styles.item}>Error: {`${error}`}</Text>
</View>
);
}
if (results === undefined) {
return null;
}
const addItem = () => {
db.transaction(tx => {
tx.executeSql('INSERT INTO items VALUES(?)', [uuidv4()]);
});
};
const clearItems = async () => {
db.transaction(tx => {
tx.executeSql('DELETE FROM items where true', undefined);
});
};
return (
<View>
{results.map((item, index) => (
<Text key={index} style={styles.item}>
Item: {item.value}
</Text>
))}
<Text style={styles.text}>Add</Text>
<Text style={styles.text}>Clear</Text>
</View>
);
};More information
See the documentation and community guidelines. If you need help let us know on Discord.
File: todoMVC/README.md
ElectricSQL - TodoMVC
This is an example TodoMVC web application using ElectricSQL in the browser with SQL.js and absurd-sql.
Install
Clone this repo and change directory into this folder:
git clone https://github.com/electric-sql/examples
cd examples/todoMVCInstall the dependencies:
yarnRun
Build and run:
yarn startSync
The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on how to run the backend locally.
Open localhost:3001 in two different browsers (so they're backed by different databases) and try it out. You'll see data being replicated between the client applications.
More information
See the documentation and community guidelines. If you need help let us know on Discord.
File: web/README.md
ElectricSQL - Web example
This is an example web application using ElectricSQL in the browser with wa-sqlite.
Install
Clone this repo and change directory into this folder:
git clone https://github.com/electric-sql/examples
cd examples/webInstall the dependencies:
yarnRun
Build and run:
yarn startSync
The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on how to run the backend locally.
Open localhost:3001 in two different browsers (so they're backed by different databases) and try it out. You'll see data being replicated between the client applications.
Notes on the code
In this example, Electric uses wa-sqlite in the browser with IndexedDB for persistence.
The main code to look at is in ./src/Example.tsx:
export const Example = () => {
const [ db, setDb ] = useState<ElectricDatabase & { electric: ElectricNamespace }>()
useEffect(() => {
const init = async () => {
const { db, electric } = await start('electric.db', '', config)
db.electric = electric // because the hook for live queries expects `electric` to be present on the `db`
setDb(db)
}
init()
}, [])
if (db === undefined) {
return null
}
return (
<ElectricProvider db={db}>
<ExampleComponent />
</ElectricProvider>
)
}This opens an electrified database client and passes it to the application using the React Context API. Components can then use the useElectric and useElectricQuery to access the database client and bind reactive queries to the component state.
This example explicitly calls potentiallyChanged on the notifier because unlike the other drivers, the wa-sqlite driver is not proxied.
const ExampleComponent = () => {
const db = useElectric() as ElectricDatabase & { electric: ElectricNamespace }
const electric = db.electric
const { results } = useElectricQuery('SELECT value FROM items', [])
const addItem = async () => {
await electric.adapter.run({
sql: 'INSERT INTO items VALUES(?)',
args: [crypto.randomUUID()]
}
)
electric.notifier.potentiallyChanged()
}
const clearItems = async () => {
await electric.adapter.run({
sql : 'DELETE FROM items where true'
})
electric.notifier.potentiallyChanged()
}
return (
Add
Clear
{results && results.map((item: any, index: any) => (
`{ item.value }`
))}
)
}More information
See the documentation and community guidelines. If you need help let us know on Discord.