Storage

Each client has the option for how they would like to store their data.

Memory

If you would only like to store data ephemerally, you can use the memory storage engine. This will store your data in memory and will not persist across page refreshes.

If you use memory storage for your outbox, data may be lost if the user refreshes the page before the data is sent to the server.

If no storage options are provided this is the default.

const client = new TriplitClient({
  storage: 'memory',
});
 
// Which is equivalent to
 
import { MemoryBTreeStorage as MemoryStorage } from '@triplit/db/storage/memory-btree';
 
const client = new TriplitClient({
  storage: {
    outbox: new MemoryStorage(),
    cache: new MemoryStorage(),
  },
});

IndexedDB

If you would like to persist data between refreshes in the browser you can use the IndexedDB storage engine. This will store your data in the browser's IndexedDB database.

To improve performance, data is also cached in memory.

const client = new TriplitClient({
  storage: 'indexeddb',
});
 
// Which is equivalent to
 
import { IndexedDbStorage } from '@triplit/db/storage/indexed-db';
 
const client = new TriplitClient({
  storage: {
    outbox: new IndexedDBStorage('triplit-outbox'),
    cache: new IndexedDBStorage('triplit-cache'),
  },
});

Note that passing storage: 'indexeddb' to the constructor will create IndexedDB databases using the names 'triplit-outbox' and 'triplit-cache'. If your application connects to multiple projects with separate clients, we recommend you create your own custom-named instances of IndexedDBStorage so that naming conflicts do not occur.

Sqlite

In the browser

Triplit does not currently provide a Sqlite storage adapter for the browser. The Triplit server, which runs in node environments, can use the sqlite storage engine.

In React Native

Triplit provides an expo-sqlite storage adapter for React Native applications. This adapter uses the expo-sqlite (opens in a new tab) package to store data on the device. Users of Expo 51 or greater can get started by importing the storage provider from @triplit/db/storage/expo-sqlite:

import { ExpoSQLiteStorage } from '@triplit/db/storage/expo-sqlite';
import { TriplitClient } from '@triplit/client';
 
new TriplitClient({
  storage: {
    cache: new ExpoSQLiteStorage('cache.db'),
    outbox: new ExpoSQLiteStorage('outbox.db'),
  },
});

You may also instantiate the storage provider with an existing database instance:

import { ExpoSQLiteStorage } from '@triplit/db/storage/expo-sqlite';
import * as SQLite from 'expo-sqlite';
import { TriplitClient } from '@triplit/client';
 
const cacheDB = SQLite.openDatabaseSync('cache.db');
const outboxDB = SQLite.openDatabaseSync('outbox.db');
 
new TriplitClient({
  storage: {
    cache: new ExpoSQLiteStorage(cacheDB),
    outbox: new ExpoSQLiteStorage(outboxDB),
  },
});

Users of Expo 50 or below can use the storage provider exported by @triplit/db/storage/expo-sqlite-legacy.

As well if there is a SQLite library that we don't yet have a storage provider for, you can create your own by implementing the SQLiteAdapter interface and providing that to AdapterSQLiteStorage available in @triplit/db/storage/adapter-sqlite. Here is a gist (opens in a new tab) implementing an adapter for op-sqlite, another SQLite library for React Native.

Clearing the cache

To clear a TriplitClient's cache, you can call the clear method. This will clear everything in the cache, including any data that has not been sent to the server.

const client = new TriplitClient({
  storage: 'indexeddb',
});
 
async function clearCacheAndSignOut() {
  await auth.signOut();
  await client.clear();
}