SveltePocket

Svelte 5-ready stores and components to bring data from any Pocketbase instance into your Svelte application (even with realtime updates 🤫).

Installation

npm install @shipitdev/sveltepocket

Setup

Call the init method to pass your Pocketbase client SDK instance. This will be used by all stores and components so make sure it's authenticated according to your needs.

<script>
  import { init } from '@shipitdev/sveltepocket';
  import Pocketbase from 'pocketbase';

  const pb = new Pocketbase(POCKETBASE_URL);
  init(pb);
</script>

Stores

The stores provide an low level API to query data from your Pocketbase instance and are the best choice when you need to pre/postprocess the data instead of just rendering it onto the page.

auth

A readable store that holds the current user's authentication status and user record.

<script>
  import { auth } from '@shipitdev/sveltepocket';
</script>

{#if $auth.isAuthenticated}
  <p>Welcome, {$auth.user.email}!</p>
{/if}

createRecordStore

Creates a readable store that fetches a single record identified by id or filter from a Pocketbase collection.

<script>
  import { createRecordStore } from '@shipitdev/sveltepocket';

  const post = createRecordStore('posts', { id: 'YOUR_RECORD_ID' });
</script>

{#if $post.record}
  <h1>{$post.record.title}</h1>
{/if}

createRecordsStore

Creates a readable store that fetches multiple records from a Pocketbase collection.

<script>
  import { createRecordsStore } from '@shipitdev/sveltepocket';

  const posts = createRecordsStore('posts');
</script>

{#if $posts.records}
  <ul>
    {#each $posts.records as post}
      <li>{post.title}</li>
    {/each}
  </ul>
{/if}

Components

If you only care about rendering the queried data, these components are the way to go.

You can pass snippets that will be rendered during different states, e.g. when loading the data, when data is not found or when an error occurs.

<Record>

A component that fetches a single record either by ID or filter from a Pocketbase collection and renders it.

<!-- by ID -->
<Record collection="posts" id="YOUR_RECORD_ID" expand="author">
  {#snippet render(post)}
    <h1>{post.title}</h1>
    <span> by {post.expand.author.name}</span>
  {/snippet}
</Record>

<!-- by filter -->
<Record collection="posts" filter="published = true">
  {#snippet render(post)}
    <h1>{post.title}</h1>
  {/snippet}
</Record>

<Records>

A component that fetches multiple records from a Pocketbase collection and renders them.

<Records collection="posts" expand="author" sort="-publishedAt" filter="published = true">
  {#snippet render(posts)}
    <ul>
      {#each posts as post}
        <li>{post.title} by {post.expand.author.name}</li>
      {/each}
    </ul>
  {/snippet}
</Records>

Realtime Updates

All stores and components support the realtime parameter. If set to true, SveltePocket will setup a subscription to PocketBase's realtime updates and keep the data up to date.

Combined with Svelte's reactivity, your app will rerender automatically when the data changes.

<!-- this will always show the latest data -->
<Records collection="posts" realtime>
  {#snippet render(posts)}
    <ul>
      {#each posts as post}
        <li>{post.title}</li>
      {/each}
    </ul>
  {/snippet}
</Records>

Type Safety

All stores and components take an optional record type, e.g. generated by pocketbase-typegen. This gives you full type safety on the returned records.

Store

<script>
  import { createRecordsStore } from '@shipitdev/sveltepocket';
  import type { PostRecord } from './pocketbase-types.d.ts';

  const posts = createRecordsStore<PostRecord>('posts');
</script>

Components

<Records collection="posts">
  {#snippet render(records: PostRecord[])}
    ...
  {/snippet}
</Records>