Warning Package has been deprecated in favor of
svelte-query-pocketbase
A set of asynchronous Svelte store wrappers for Pocketbase that update in realtime.
npm i -D svelte-pocketbase-stores
Readable asynchronous Svelte store wrapper around a Pocketbase record that updates in realtime.
Notes:
undefined
.undefined
.<script lang="ts">
import Pocketbase from 'pocketbase';
import { safeLoad, recordStore } from 'svelte-pocketbase-stores';
const pocketbase = new Pocketbase(process.env.PB_URL);
// If you use https://github.com/patmood/pocketbase-typegen, you should do `recordStore<SomeCollectionResponse>(Collections.SomeCollection)`.
const { state, ...record } = recordStore(pocketbase.collection('some_collection'), 'some_id');
</script>
{#await safeLoad(record)}
<p>Loading...</p>
{:then loadedSafely}
{#if !loadedSafely}
Something went wrong...
{:else}
<!-- This will now update in realtime -->
<pre>{JSON.stringify($record, null, 2)}</pre>
<button on:click={() => record.reload()} disabled={$state.isReloading}
>{$state.isReloading ? 'Reloading...' : 'Reload'}</button
>
{/if}
{/await}
<script lang="ts">
import Pocketbase from 'pocketbase';
import { safeLoad, recordStore } from 'svelte-pocketbase-stores';
const pocketbase = new Pocketbase(process.env.PB_URL);
// `queryParams` will be used during the inital fetch, and everytime an update is received via the realtime subscription
const { state, ...record } = recordStore(pocketbase.collection('some_collection'), 'some_id', {
queryParams: { expand: 'some_field' }
});
</script>
{#await safeLoad(record)}
<p>Loading...</p>
{:then loadedSafely}
{#if !loadedSafely}
Something went wrong...
{:else}
<!-- This will now update in realtime -->
<pre>{JSON.stringify($record, null, 2)}</pre>
<button on:click={() => record.reload()} disabled={$state.isReloading}
>{$state.isReloading ? 'Reloading...' : 'Reload'}</button
>
{/if}
{/await}
When running server-side, this store returns the "empty version" version of this store, i.e. undefined
, and then executes normally client-side. So you could use it normally as shown in the previous examples, or you could fetch the record server-side and pass it to recordStore
. When done so, recordStore
will skip the initial fetch and only create the realtime subscription client-side.
// +page.server.ts or +page.ts
export async function load() {
const pocketbase = new Pocketbase(process.env.PB_URL);
return {
initial: await collection.getOne('some_id')
};
}
<!-- +page.svelte -->
<script lang="ts">
import Pocketbase from 'pocketbase';
import { safeLoad, recordStore } from 'svelte-pocketbase-stores';
import type { PageData } from './$types';
export let data: PageData;
const pocketbase = new Pocketbase(process.env.PB_URL);
const { state, ...record } = recordStore(pocketbase.collection('some_collection'), 'some_id', {
initial: data.initial
});
</script>
{#await safeLoad(record)}
<p>Loading...</p>
{:then loadedSafely}
{#if !loadedSafely}
Something went wrong...
{:else}
<!-- This will now update in realtime -->
<pre>{JSON.stringify($record, null, 2)}</pre>
<button on:click={() => record.reload()} disabled={$state.isReloading}
>{$state.isReloading ? 'Reloading...' : 'Reload'}</button
>
{/if}
{/await}
Readable async Svelte store wrapper around an entire Pocketbase collection that updates in realtime.
sortFunction
runs first, then filterFunction
runs.paginatedCollectionStore
if you want pagination.<script lang="ts">
import Pocketbase from 'pocketbase';
import { safeLoad, collectionStore } from 'svelte-pocketbase-stores';
const pocketbase = new Pocketbase(process.env.PB_URL);
// If you use https://github.com/patmood/pocketbase-typegen, you should do `collectionStore<SomeRecordResponse>(Collections.SomeRecord)`.
const { state, ...collection } = collectionStore(pocketbase.collection('test'));
</script>
{#await safeLoad(collection)}
<p>Loading...</p>
{:then loadedSafely}
{#if !loadedSafely}
Something went wrong...
{:else}
<!-- This will now update in realtime. -->
{#each $collection as record}
<p>Record: '{record.id}'</p>
<pre>{JSON.stringify(record, null, 2)}</pre>
{/each}
<button on:click={() => collection.reload()} disabled={$state.isReloading}
>{$state.isReloading ? 'Reloading...' : 'Reload'}</button
>
{/if}
{/await}
<script lang="ts">
import Pocketbase from 'pocketbase';
import { safeLoad, collectionStore } from 'svelte-pocketbase-stores';
const pocketbase = new Pocketbase(process.env.PB_URL);
// If you wanted to sort, you can do so by adding `queryParams.sort` and `sortFunction`
const { state, ...record } = collectionStore(pocketbase.collection('test'), {
queryParams: { filter: 'verified = true' },
filterFunction: (value, index, array) => value.verified
});
</script>
{#await safeLoad(collection)}
<p>Loading...</p>
{:then loadedSafely}
{#if !loadedSafely}
Something went wrong...
{:else}
<!-- This will now update in realtime. -->
{#each $collection as record}
<p>Record: '{record.id}'</p>
<pre>{JSON.stringify(record, null, 2)}</pre>
{/each}
<button on:click={() => collection.reload()} disabled={$state.isReloading}
>{$state.isReloading ? 'Reloading...' : 'Reload'}</button
>
{/if}
{/await}
When running server-side, this store returns the "empty version" version of this store, i.e. an empty array, and then executes normally client-side. So you could use it normally as shown in the previous examples, or you could fetch the collection server-side and pass it to collectionStore
. When done so, collectionStore
will skip the initial fetch and only create the realtime subscription client-side.
// +page.server.ts or +page.ts
export async function load() {
const pocketbase = new Pocketbase(process.env.PB_URL);
return {
initial: await collection.getFullList()
};
}
<!-- +page.svelte -->
<script lang="ts">
import Pocketbase from 'pocketbase';
import { safeLoad, collectionStore } from 'svelte-pocketbase-stores';
import type { PageData } from './$types';
export let data: PageData;
const pocketbase = new Pocketbase(process.env.PB_URL);
const { state, ...record } = collectionStore(pocketbase.collection('some_collection'), {
initial: data.initial
});
</script>
{#await safeLoad(record)}
<p>Loading...</p>
{:then loadedSafely}
{#if !loadedSafely}
Something went wrong...
{:else}
<!-- This will now update in realtime -->
<pre>{JSON.stringify($record, null, 2)}</pre>
<button on:click={() => record.reload()} disabled={$state.isReloading}
>{$state.isReloading ? 'Reloading...' : 'Reload'}</button
>
{/if}
{/await}
Paginated readable async Svelte store wrapper around a Pocketbase collection that updates in realtime.
Notes:
ListResult
with items
set to []
, totalItems
and totalPages
set to 0. setPage
, next
, and prev
will also have no effects.setPage
, next
, or prev
is called, the returned store is reset to have only the items in the specified page.sortFunction
runs first, then filterFunction
runs.collectionStore
if you want the entire collection.<script lang="ts">
import Pocketbase from 'pocketbase';
import { safeLoad, paginatedCollectionStore } from 'svelte-pocketbase-stores';
const pocketbase = new Pocketbase(process.env.PB_URL);
// If you use https://github.com/patmood/pocketbase-typegen, you should do `collectionStore<SomeRecordResponse>(Collections.SomeRecord)`.
const { state, ...collection } = paginatedCollectionStore(pocketbase.collection('test'), {
page: 1,
perPage: 20
});
</script>
{#await safeLoad(collection)}
<p>Loading...</p>
{:then loadedSafely}
{#if !loadedSafely}
Something went wrong...
{:else}
<!-- This will now update in realtime. -->
{#each $collection.items as record}
<p>Record: '{record.id}'</p>
<pre>{JSON.stringify(record, null, 2)}</pre>
{/each}
<p>Current page: {$collection.page}</p>
<p>Items per page: {$collection.perPage}</p>
<p>Total items: {$collection.totalItems}</p>
<p>Total pages: {$collection.totalPages}</p>
<button on:click={() => collection.next()}>Next Page</button>
<button on:click={() => collection.prev()}>Previous Page</button>
<button on:click={() => collection.reload()} disabled={$state.isReloading}
>{$state.isReloading ? 'Reloading...' : 'Reload'}</button
>
{/if}
{/await}
<script lang="ts">
import Pocketbase from 'pocketbase';
import { safeLoad, paginatedCollectionStore } from 'svelte-pocketbase-stores';
const pocketbase = new Pocketbase(process.env.PB_URL);
// If you wanted to sort, you can do so by adding `queryParams.sort` and `sortFunction`
const { state, ...record } = paginatedCollectionStore(pocketbase.collection('test'), {
queryParams: { filter: 'verified = true' },
filterFunction: (value, index, array) => value.verified
});
</script>
{#await safeLoad(collection)}
<p>Loading...</p>
{:then loadedSafely}
{#if !loadedSafely}
Something went wrong...
{:else}
<!-- This will now update in realtime. -->
{#each $collection.items as record}
<p>Record: '{record.id}'</p>
<pre>{JSON.stringify(record, null, 2)}</pre>
{/each}
<p>Current page: {$collection.page}</p>
<p>Items per page: {$collection.perPage}</p>
<p>Total items: {$collection.totalItems}</p>
<p>Total pages: {$collection.totalPages}</p>
<button on:click={() => collection.next()}>Next Page</button>
<button on:click={() => collection.prev()}>Previous Page</button>
<button on:click={() => collection.reload()} disabled={$state.isReloading}
>{$state.isReloading ? 'Reloading...' : 'Reload'}</button
>
{/if}
{/await}
When running server-side, this store returns the "empty version" version of this store, i.e. an empty ListResult
with items
set to []
, totalItems
and totalPages
set to 0. setPage
, next
, and prev
will also have no effects, and then executes normally client-side. So you could use it normally as shown in the previous examples, or you could fetch the collection server-side and pass it to paginatedCollectionStore
. When done so, paginatedCollectionStore
will skip the initial fetch and only create the realtime subscription client-side.
// +page.server.ts or +page.ts
export async function load() {
const pocketbase = new Pocketbase(process.env.PB_URL);
return {
initial: await collection.getList(1, 20)
};
}
<!-- +page.svelte -->
<script lang="ts">
import Pocketbase from 'pocketbase';
import { safeLoad, paginatedCollectionStore } from 'svelte-pocketbase-stores';
import type { PageData } from './$types';
export let data: PageData;
const pocketbase = new Pocketbase(process.env.PB_URL);
const { state, ...record } = paginatedCollectionStore(pocketbase.collection('some_collection'), {
initial: data.initial,
page: 1,
perPage: 20
});
</script>
{#await safeLoad(record)}
<p>Loading...</p>
{:then loadedSafely}
{#if !loadedSafely}
Something went wrong...
{:else}
<!-- This will now update in realtime -->
<pre>{JSON.stringify($record, null, 2)}</pre>
<button on:click={() => record.reload()} disabled={$state.isReloading}
>{$state.isReloading ? 'Reloading...' : 'Reload'}</button
>
{/if}
{/await}