Supabase plugin for reactive read/write against local objects.

Extends the existing Supabase JavaScript functionality by adding a bi-directional, bound object which syncs with the server when its state changes. Changes on the server (or from another client) similarly update local state across all clients.

import Reactive from '@momsfriendlydevco/supabase-reactive';
import {createClient} from '@supabase/supabase-js'

// Create a Supabase client
let supabase = creatClient('https://MY-SUPABASE-DOMAIN.supabase.co', 'big-long-key');

// Create a reactive
let state = Reactive('my-table/id-to-sync', {supabase});

// Changes to state are now synced bi-directionally
state.foo = 1;
state.bar = [1, 2, 3];
state.baz = {key1: {subkey1: [4, 5, 6]}};
delete state.bar;

Ideally the data structure within Supabase should be made up of these columns:

• id - a UUID is recommended
• created_at - optional timestamp to indicate when the row was created
• edited_at - timestamp to track changes
• version - optional numeric to indicate the version offset of the row
• data - the main JSONB data entity storage

An example Postgres data command is:

create table
  public.test (
    id uuid not null default gen_random_uuid (),
    created_at timestamp with time zone not null default now(),
    edited_at timestamp with time zone null,
    data jsonb null,
    version bigint null,
    constraint test_pkey primary key (id),
    constraint test_id_key unique (id)
  ) tablespace pg_default;

The main exported function which returns a Reactive object.

The resulting reactive object also has a series of non-enumerable utility functions which all start with a single dollar sign. See below for their purpose and documentation.

This can take an optional shorthand path and/or an options structure.

Valid options are:

Storage object for all defaults used by SupabaseReactive.

Meta information about the current row. This only really exists because we can't assign scalars in Javascript without it resetting the pointer later.

This object is made up of:

Sets the content of the current reactive.

Valid options are:

Tidy JSON field data so that is safe from private methods (anything starting with '$' or '_', proxies or other non POJO slush. Returns a POJO.

Alias of Reactive.$read().

Generate a Supabase object representing a query for the current configuration. Returns a Supabase promise which resolves when the operation has completed

Initial operaton to wait on data from service + return reactable This function is the default response when calling the outer SupabaseReactive() function.

Fetch the current data state from the server and update the reactive. Returns a promise.

Fetch the current data state from the server but don't update the local state. This function is only really useful for snapshotting server state. Returns a promise which resolves with the snapshot data.

Watch local data for changes and push to the server as needed. Returns a promise.

Wait for all local writes to complete. NOTE: This only promises that local writes complete, not that a subsequent read is required. Returns a promise.

Toggle subscription to the realtime datafeed. Returns a promise.

Release all watchers and subscriptions, local and remote. Returns a promise.