createSupabasePersister

The createSupabasePersister function creates a SupabasePersister object that can persist the Store to a Supabase project.

createSupabasePersister(
  store: Store | MergeableStore,
  supabase: SupabaseClient<any, "public", "public", any, any>,
  configOrStoreTableName?: string | DpcJson,
  onIgnoredError?: (error: any) => void,
): SupabasePersister

A SupabasePersister supports regular Store objects, and can also be used to persist the metadata of a MergeableStore.

As well as providing a reference to the Store to persist, you must provide a supabase parameter which is the client returned from Supabase's createClient function.

The Persister stores a JSON serialization of the whole Store in a single row of a table. The third argument is a DpcJson object that configures the table and column names to use, or, if it is simply a string, it is used as the storeTableName property.

Unlike the other database Persisters, this one will not create or alter any of that structure for you, so you need to set it up yourself with a migration or the Supabase SQL editor before the Persister will work at all. By default it expects a table called tinybase with a text primary key called _id and a text column called store:

CREATE TABLE tinybase (_id text PRIMARY KEY, store text);

Row-level security applies to everything the Persister does, so it will read nothing and save nothing until a policy grants access to it. What that policy should be depends on who is allowed to see the Store: the following lets any signed-in user read and write it, which suits a Store that a whole team shares, but a per-user Store wants a policy that compares auth.uid() to a column of its own instead.

ALTER TABLE tinybase ENABLE ROW LEVEL SECURITY;
CREATE POLICY tinybase_access ON tinybase
  FOR ALL TO authenticated USING (true) WITH CHECK (true);

For the startAutoLoad method to pick up changes made elsewhere, the table must also be published to Supabase Realtime:

ALTER PUBLICATION supabase_realtime ADD TABLE tinybase;

Note that Realtime checks a client's SELECT policy before it will send that client a change, so a Store that loads and saves correctly but never auto-loads is usually a policy problem rather than a publication one.

If you cannot enable Realtime, set the autoLoadIntervalSeconds property of the DpcJson object, and the Persister will additionally poll the table at that interval. It does not poll unless you provide that property.

import {createClient} from '@supabase/supabase-js';
import {createStore} from 'tinybase';
import {createSupabasePersister} from 'tinybase/persisters/persister-supabase';

const supabase = createClient(
  'https://my-project.supabase.co',
  'anon-key',
);
const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
const persister = createSupabasePersister(store, supabase, 'my_tinybase');

await persister.save();
// Store will be saved to the Supabase table.

console.log((await supabase.from('my_tinybase').select('store')).data);
// -> [{store: '[{"pets":{"fido":{"species":"dog"}}},{}]'}]

await persister.destroy();

import {createClient} from '@supabase/supabase-js';
import {createStore} from 'tinybase';
import {createSupabasePersister} from 'tinybase/persisters/persister-supabase';

const supabase = createClient(
  'https://my-project.supabase.co',
  'anon-key',
);
const store = createStore();
const persister = createSupabasePersister(store, supabase, {
  mode: 'json',
  storeTableName: 'my_tinybase',
});

await persister.startAutoLoad();
await persister.startAutoSave();

// Changes made by other clients now arrive over Realtime.

await persister.destroy();