A simple, typesafe library that syncs Supabase Postgres data with Svelte stores in real time. Inspired by SvelteFire.
<script lang="ts">
// ...imports
// ...initialize Supabase client
// get realtime data from the messages table
const messages = getTableStore<Message>(supabaseClient, 'messages');
</script>
{#each $messages as message}
<p>{message.text}</p>
{/each}
getTableStore<Message, NewMessage, MutateMessage>(supabaseClient, "messages");
const messages = getTableStore(supabaseClient, "messages");
const entry = {
id: 1,
text: "Hey there!",
};
// adds an entry to the table
messages.add({ text: entry.text });
// removes an entry from the table
messages.remove(entry.id);
// mutates an existing entry in the table
messages.mutate(entry.id, { text: "New message" });
indexName
option:const messages = getTableStore(supabaseClient, "messages", {indexName: "uuid"});
mutateInterval
option. This broadcasts changes to all connected clients without updating the database in case mutate requests are sent faster than the interval. After the interval is over or a client disconnects, the database will be updated. Useful for decreasing the load on the database for applications that make very frequent mutations to persistent data.// Set a 10 second table mutation interval
const messages = getTableStore(supabaseClient, "messages", {mutateInterval: 10000});
onReady
callback function:const messages = getTableStore(supabaseClient, "messages", {indexName: "id", mutateInterval: 2000}, () => {
console.log("Ready to broadcast!");
});
SvelteKit:
npm i -D @niek-peters/supasvelte
Svelte:
npm i @niek-peters/supasvelte