@datafn/svelte

Package

npm install @datafn/svelte

Peer dependencies: svelte ^3.0.0 || ^4.0.0

`toSvelteStore<T>(signal)`

Converts a DatafnSignal<T> to a Svelte Readable store.

function toSvelteStore<T>(signal: DatafnSignal<T>): DatafnSvelteStore<T>;

Parameters

Parameter	Type	Description
`signal`	`DatafnSignal<T>`	A signal from a table handle, e.g. `client.todos.signal({ ... })`.

Returns

A DatafnSvelteStore<T> — a Svelte Readable store that emits signal state.

Example

import { toSvelteStore } from "@datafn/svelte";

const todosStore = toSvelteStore(
  client.todos.signal({ sort: ["-createdAt"] })
);

{#if $todosStore.loading}
  <p>Loading...</p>
{:else}
  {#each $todosStore.data ?? [] as todo}
    <p>{todo.title}</p>
  {/each}
{/if}

`DatafnSvelteStore<T>`

type DatafnSvelteStore<T> = Readable<{
  data: T;
  loading: boolean;
  error: DatafnError | null;
  refreshing: boolean;
  nextCursor?: string | null;
}>;

Properties

Property	Type	Description
`data`	`T`	Current query result value.
`loading`	`boolean`	`true` during initial fetch.
`error`	`DatafnError \| null`	Non-null if the last fetch failed.
`refreshing`	`boolean`	`true` while refreshing after mutation/sync changes.
`nextCursor`	`string \| null`	Cursor for next page, or `null`.

`toSvelteStore<T, C>(clientRef, signalFactory)`

Overload for client-reference driven signal creation.

function toSvelteStore<T, C>(
  clientRef: ClientRef<C>,
  signalFactory: (client: C) => DatafnSignal<T>,
): DatafnSvelteStore<T>;

Parameters

Parameter	Type	Description
`clientRef`	`ClientRef<C>`	A subscribable client reference.
`signalFactory`	`(client: C) => DatafnSignal<T>`	Creates a signal from the current client.

`ClientRef<C>`

type ClientRef<C> = {
  subscribe(fn: (client: C) => void): () => void;
};

@datafn/svelte

On this page