Package detail

svelte-query-pocketbase

goknsh29MITdeprecated1.1.0

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

TanStack Query wrappers around Pocketbase Realtime for Svelte

svelte, svelte store, pocketbase, pocketbase realtime, tanstack, tanstack query, realtime

readme

svelte-query-pocketbase

TanStack Query wrappers around Pocketbase Realtime for Svelte.

Installation

npm i -D svelte-query-pocketbase

Record Query

Creates a TanStack Query that updates a Pocketbase record in realtime. View the JSDoc for the relevant functions for more documentation on their available options.

Simple Example

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createRecordQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    const someRecord = createRecordQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection),
        'some_id'
    );
</script>

{#if $someRecord.data}
    <p>Fetched record:</p>
    <pre>{JSON.stringify($someRecord.data, null, 2)}</pre>
{:else if $someRecord.error}
    {#if $someRecord.error.status === 404}
        <p>The record couldn't be found in the database.</p>
    {:else}
        <p>Something went wrong.</p>
        <button on:click={() => $someRecord.refetch()}>Try again</button>
    {/if}
{:else}
    <p>Loading...</p>
{/if}

With Query Params

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createRecordQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    const someRecord = createRecordQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection),
        'some_id',
        {
            queryParams: {
                expand: 'some_field',
                fields: 'some_field' // the library will internally add id and updated to this
            }
        }
    );
</script>

{#if $someRecord.data}
    <p>Fetched record, with some_field expanded:</p>
    <pre>{JSON.stringify($someRecord.data, null, 2)}</pre>
{:else if $someRecord.error}
    {#if $someRecord.error.status === 404}
        <p>The record couldn't be found in the database.</p>
    {:else}
        <p>Something went wrong.</p>
        <button on:click={() => $someRecord.refetch()}>Try again</button>
    {/if}
{:else}
    <p>Loading...</p>
{/if}

Using SSR

Read TanStack Query's docs on this first. The examples below are modified versions of the examples on that page.

Using `initialData`

src/routes/+page.ts

import type { PageLoad } from './$types';

import Pocketbase from 'pocketbase';
import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

// Types generated from https://github.com/patmood/pocketbase-typegen
import { Collections, type SomeCollectionResponse } from '$lib/collections';

import { createRecordQueryInitialData } from 'svelte-query-pocketbase';

export const load: PageLoad = async () => {
    const someIdInitialData = await createRecordQueryInitialData<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection),
        'some_id'
    );
    return { someIdInitialData };
};

src/routes/+page.svelte

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    import type { PageData } from './$types';
    export let data: PageData;

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createRecordQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    const someRecord = createRecordQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection),
        'some_id',
        {
            initialData: data.someIdInitialData
        }
    );
</script>

Using `prefetchQuery`

src/routes/+layout.ts

Same as TanStack Query's docs

src/routes/+layout.svelte

Same as TanStack Query's docs

src/routes/+page.ts

import type { PageLoad } from './$types';

import Pocketbase from 'pocketbase';
import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

// Types generated from https://github.com/patmood/pocketbase-typegen
import { Collections, type SomeCollectionResponse } from '$lib/collections';

import { createRecordQueryPrefetch } from 'svelte-query-pocketbase';

export const load: PageLoad = async ({ parent }) => {
    const { queryClient } = await parent();

    // As long as the same collection, id, and queryParams are supplied to
    // `createRecordQueryPrefetch` and `createRecordQuery`, the library will
    // generate the same `queryKey`s for both functions, and you need not specify one
    await queryClient.prefetchQuery(
        createRecordQueryPrefetch<SomeCollectionResponse>(
            pocketbase.collection(Collections.SomeCollection),
            'some_id'
        )
    );
};

src/routes/+page.svelte

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    import type { PageData } from './$types';
    export let data: PageData;

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createRecordQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    // This data is cached by prefetchQuery in +page.ts so no fetch actually happens here
    const someRecord = createRecordQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection),
        'some_id'
    );
</script>

Collection Query

Creates a TanStack Query that updates an array of Pocketbase records in realtime. View the JSDoc for the relevant functions for more documentation on their available options.

Simple Example

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createCollectionQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    const someCollection = createCollectionQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection)
    );
</script>

{#if $someCollection.data}
    <p>Fetched collection:</p>
    <pre>{JSON.stringify($someCollection.data, null, 2)}</pre>
{:else if $someCollection.error}
    {#if $someCollection.error.status === 404}
        <p>The collection couldn't be found in the database.</p>
    {:else}
        <p>Something went wrong.</p>
        <button on:click={() => $someCollection.refetch()}>Try again</button>
    {/if}
{:else}
    <p>Loading...</p>
{/if}

With Query Params

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createCollectionQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    const someCollection = createCollectionQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection),
        {
            queryParams: {
                expand: 'some_field',
                sort: '-created', // sort by date created, descending
                filter: 'created >= "2022-01-01 00:00:00"',
                fields: 'some_field' // the library will internally add id and updated to this
            },
            // sortFunction and filterFunction are applied after a realtime update is applied
            sortFunction: (a, b) => new Date(a.created) - new Date(b.created) // sort by date created, descending
            filterFunction: (record) => new Date(record.created) >= new Date("2022-01-01 00:00:00")
        }
    );
</script>

{#if $someCollection.data}
    <p>
        Fetched collection, with some_field expanded, sorted by date created (descending), and filtered
        by date created after 2022-01-01 00:00:00:
    </p>
    <pre>{JSON.stringify($someCollection.data, null, 2)}</pre>
{:else if $someCollection.error}
    {#if $someCollection.error.status === 404}
        <p>The collection couldn't be found in the database.</p>
    {:else}
        <p>Something went wrong.</p>
        <button on:click={() => $someCollection.refetch()}>Try again</button>
    {/if}
{:else}
    <p>Loading...</p>
{/if}

Using SSR

Read TanStack Query's docs on this first. The examples below are modified versions of the examples on that page.

Using `initialData`

src/routes/+page.ts

import type { PageLoad } from './$types';

import Pocketbase from 'pocketbase';
import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

// Types generated from https://github.com/patmood/pocketbase-typegen
import { Collections, type SomeCollectionResponse } from '$lib/collections';

import { createCollectionQueryInitialData } from 'svelte-query-pocketbase';

export const load: PageLoad = async () => {
    const someCollectionInitialData = await createCollectionQueryInitialData<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection)
    );
    return { someCollectionInitialData };
};

src/routes/+page.svelte

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    import type { PageData } from './$types';
    export let data: PageData;

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createCollectionQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    const someCollection = createCollectionQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection),
        {
            initialData: data.someCollectionInitialData
        }
    );
</script>

Using `prefetchQuery`

src/routes/+layout.ts

Same as TanStack Query's docs

src/routes/+layout.svelte

Same as TanStack Query's docs

src/routes/+page.ts

import type { PageLoad } from './$types';

import Pocketbase from 'pocketbase';
import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

// Types generated from https://github.com/patmood/pocketbase-typegen
import { Collections, type SomeCollectionResponse } from '$lib/collections';

import { createCollectionQueryPrefetch } from 'svelte-query-pocketbase';

export const load: PageLoad = async ({ parent }) => {
    const { queryClient } = await parent();

    // As long as the same collection, id, and queryParams are supplied to
    // `createCollectionQueryPrefetch` and `createCollectionQuery`, the library will
    // generate the same `queryKey`s for both functions, and you need not specify one
    await queryClient.prefetchQuery(
        createCollectionQueryPrefetch<SomeCollectionResponse>(
            pocketbase.collection(Collections.SomeCollection)
        )
    );
};

src/routes/+page.svelte

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    import type { PageData } from './$types';
    export let data: PageData;

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createCollectionQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    // This data is cached by prefetchQuery in +page.ts so no fetch actually happens here
    const someCollection = createCollectionQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection)
    );
</script>

Infinite Collection Query

Creates a TanStack Infinite Query that updates paginated Pocketbase records in realtime. View the JSDoc for the relevant functions for more documentation on their available options.

Simple Example

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createInfiniteCollectionQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    const someInfiniteCollection = createInfiniteCollectionQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection)
    );
</script>

{#if $someInfiniteCollection.data}
    <p>Fetched infinite collection:</p>
    <pre>{JSON.stringify($someInfiniteCollection.data, null, 2)}</pre>
    {#if $someInfiniteCollection.hasNextPage}
        <button
            on:click={() => $someInfiniteCollection.fetchNextPage()}
            disabled={$someInfiniteCollection.isFetchingNextPage}
            >{$someInfiniteCollection.isFetchingNextPage
                ? 'Fetching next page...'
                : 'Fetch next page'}</button
        >
    {/if}
{:else if $someInfiniteCollection.error}
    {#if $someInfiniteCollection.error.status === 404}
        <p>The collection couldn't be found in the database.</p>
    {:else}
        <p>Something went wrong.</p>
        <button on:click={() => $someInfiniteCollection.refetch()}>Try again</button>
    {/if}
{:else}
    <p>Loading...</p>
{/if}

With Query Params

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createInfiniteCollectionQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    const someInfiniteCollection = createInfiniteCollectionQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection),
        {
            queryParams: {
                expand: 'some_field',
                sort: '-created', // sort by date created, descending
                filter: 'created >= "2022-01-01 00:00:00"',
                fields: 'some_field' // the library will internally add id and updated to this
            },
            // sortFunction and filterFunction are applied after a realtime update is applied
            sortFunction: (a, b) => new Date(a.created) - new Date(b.created) // sort by date created, descending
            filterFunction: (record) => new Date(record.created) >= new Date("2022-01-01 00:00:00")
        }
    );
</script>

{#if $someInfiniteCollection.data}
    <p>
        Fetched infinite collection, with some_field expanded, sorted by date created (descending), and
        filtered by date created after 2022-01-01 00:00:00:
    </p>
    <pre>{JSON.stringify($someInfiniteCollection.data, null, 2)}</pre>
    {#if $someInfiniteCollection.hasNextPage}
        <button
            on:click={() => $someInfiniteCollection.fetchNextPage()}
            disabled={$someInfiniteCollection.isFetchingNextPage}
            >{$someInfiniteCollection.isFetchingNextPage
                ? 'Fetching next page...'
                : 'Fetch next page'}</button
        >
    {/if}
{:else if $someInfiniteCollection.error}
    {#if $someInfiniteCollection.error.status === 404}
        <p>The collection couldn't be found in the database.</p>
    {:else}
        <p>Something went wrong.</p>
        <button on:click={() => $someInfiniteCollection.refetch()}>Try again</button>
    {/if}
{:else}
    <p>Loading...</p>
{/if}

Using SSR

Read TanStack Query's docs on this first. The examples below are modified versions of the examples on that page.

Using `initialData`

src/routes/+page.ts

import type { PageLoad } from './$types';

import Pocketbase from 'pocketbase';
import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

// Types generated from https://github.com/patmood/pocketbase-typegen
import { Collections, type SomeCollectionResponse } from '$lib/collections';

import { infiniteCollectionQueryInitialData } from 'svelte-query-pocketbase';

export const load: PageLoad = async () => {
    const someInfiniteCollectionInitialData =
        await infiniteCollectionQueryInitialData<SomeCollectionResponse>(
            pocketbase.collection(Collections.SomeCollection)
        );
    return { someInfiniteCollectionInitialData };
};

src/routes/+page.svelte

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    import type { PageData } from './$types';
    export let data: PageData;

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createInfiniteCollectionQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    const someInfiniteCollection = createInfiniteCollectionQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection),
        {
            initialData: data.someInfiniteCollectionInitialData
        }
    );
</script>

Using `prefetchQuery`

src/routes/+layout.ts

Same as TanStack Query's docs

src/routes/+layout.svelte

Same as TanStack Query's docs

src/routes/+page.ts

import type { PageLoad } from './$types';

import Pocketbase from 'pocketbase';
import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

// Types generated from https://github.com/patmood/pocketbase-typegen
import { Collections, type SomeCollectionResponse } from '$lib/collections';

import { infiniteCollectionQueryPrefetch } from 'svelte-query-pocketbase';

export const load: PageLoad = async ({ parent }) => {
    const { queryClient } = await parent();

    // As long as the same collection, id, and queryParams are supplied to
    // `infiniteCollectionQueryPrefetch` and `createCollectionQuery`, the library will
    // generate the same `queryKey`s for both functions, and you need not specify one
    await queryClient.prefetchQuery(
        infiniteCollectionQueryPrefetch<SomeCollectionResponse>(
            pocketbase.collection(Collections.SomeCollection)
        )
    );
};

src/routes/+page.svelte

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    import type { PageData } from './$types';
    export let data: PageData;

    // Types generated from https://github.com/patmood/pocketbase-typegen
    import { Collections, type SomeCollectionResponse } from '$lib/collections';

    import { createInfiniteCollectionQuery } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    // This data is cached by prefetchQuery in +page.ts so no fetch actually happens here
    const someInfiniteCollection = createInfiniteCollectionQuery<SomeCollectionResponse>(
        pocketbase.collection(Collections.SomeCollection)
    );
</script>

User Store

Svelte store wrapper around the authenticated Pocketbase user that updates in realtime.

Using Default Auth Store

<script lang="ts">
    import Pocketbase from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    import { userStore, type KnownUser } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);

    interface CustomKnownUser extends KnownUser {
        id: string;
        name: string;
        username: string;
        avatar?: string;
    }

    const user = userStore<CustomKnownUser>(pocketbase, (authStore) => ({
        isLoggedIn: true,
        id: authStore.model?.id ?? '',
        avatar: authStore.model?.avatar,
        username: authStore.model?.username ?? ''
        name: authStore.model?.name ?? '',
    }));
</script>

{#if $user.isLoggedIn}
    <p>Welcome, {$user.name}:</p>
    <pre>{JSON.stringify($user, null, 2)}</pre>
{:else}
    <p>You are not logged in.</p>
{/if}

Using Local Auth Store

<script lang="ts">
    import Pocketbase, { LocalAuthStore } from 'pocketbase';
    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';

    import { userStore, type KnownUser } from 'svelte-query-pocketbase';

    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL, new LocalAuthStore("authInfo"));

    interface CustomKnownUser extends KnownUser {
        id: string;
        name: string;
        username: string;
        avatar?: string;
    }

    const user = userStore<CustomKnownUser, LocalAuthStore>(pocketbase, (authStore) => ({
        isLoggedIn: true,
        id: authStore.model?.id ?? '',
        avatar: authStore.model?.avatar,
        username: authStore.model?.username ?? ''
        name: authStore.model?.name ?? '',
    }));
</script>

{#if $user.isLoggedIn}
    <p>Welcome, {$user.name}:</p>
    <pre>{JSON.stringify($user, null, 2)}</pre>
{:else}
    <p>You are not logged in.</p>
{/if}

changelog

svelte-query-pocketbase

1.1.0

Minor Changes

f5c1603 Thanks @goknsh! - feat: add support for the optional fields introduced in v0.15.0 of the Pocketbase SDK. If the fields key is present in the queryParams object passed to any of the libraries functions, id and updated will be added since the library uses them internally.

1.0.2

Patch Changes

b37004e Thanks @goknsh! - chore: mark ^0.14.0 as compatible

1.0.1

Patch Changes

7ae44bd Thanks @goknsh! - chore: mark ^0.13.0 as compatible

1.0.0

Major Changes

ccbd040 Thanks @goknsh! - chore: create first major release

Patch Changes

293013b Thanks @goknsh! - fix: correct argument for hasSubscriptionListeners in all collection queries
e00c1f9 Thanks @goknsh! - chore: allow pocketbase ^0.11.1 || ^0.12.0
(breaking) fix!: remove id arg from all collection prefetches, and better log messages
2026df7 Thanks @goknsh! - fix: stringify query keys in debug messages
55f6b76 Thanks @goknsh! - fix: fix generic type for all stores
b362724 Thanks @goknsh! - fix: correct filterFunction's return type
8a8d2a2 Thanks @goknsh! - fix: change how queries are invalidated
89e1e8e Thanks @goknsh! - (breaking) fix!: correct implementation of queryKey factory and internal usages of it
40e97e3 Thanks @goknsh! - fix: collection deletes are now processed correctly
438a755 Thanks @goknsh! - chore: make README.md prettier
7e7def0 Thanks @goknsh! - refactor: all queries are simplified, now update cache immutably, and infinite queries should work correctly now
5c4e065 Thanks @goknsh! - chore: update pocketbase to ^0.11.1, use getFullList w/o batchSize, RecordService type, and sort imports
4705c05 Thanks @goknsh! - chore: export infinite collection query
379b302 Thanks @goknsh! - chore: prepare for first release

0.0.1-beta.12

Patch Changes

e00c1f9 Thanks @goknsh! - chore: allow pocketbase ^0.11.1 || ^0.12.0

0.0.1-beta.11

Patch Changes

5c4e065 Thanks @goknsh! - chore: update pocketbase to ^0.11.1, use getFullList w/o batchSize, RecordService type, and sort imports

0.0.1-beta.10

Patch Changes

438a755 Thanks @goknsh! - chore: make README.md prettier
379b302 Thanks @goknsh! - chore: prepare for first release

0.0.1-beta.9

Patch Changes

40e97e3 Thanks @goknsh! - fix: collection deletes are now processed correctly

0.0.1-beta.8

Patch Changes

7e7def0 Thanks @goknsh! - refactor: all queries are simplified, now update cache immutably, and infinite queries should work correctly now

0.0.1-beta.7

Patch Changes

4705c05 Thanks @goknsh! - chore: export infinite collection query

0.0.1-beta.6

Patch Changes

8a8d2a2 Thanks @goknsh! - fix: change how queries are invalidated

0.0.1-beta.5

Patch Changes

293013b Thanks @goknsh! - fix: correct argument for hasSubscriptionListeners in all collection queries

0.0.1-beta.4

Patch Changes

89e1e8e Thanks @goknsh! - (breaking) fix!: correct implementation of queryKey factory and internal usages of it

0.0.1-beta.3

Patch Changes

2026df7 Thanks @goknsh! - fix: stringify query keys in debug messages

0.0.1-beta.2

Patch Changes

(breaking) fix!: remove id arg from all collection prefetches, and better log messages

Package detail

readme

svelte-query-pocketbase

Installation

Record Query

Simple Example

With Query Params

Using SSR

Using initialData

Using prefetchQuery

Collection Query

Simple Example

With Query Params

Using SSR

Using initialData

Using prefetchQuery

Infinite Collection Query

Simple Example

With Query Params

Using SSR

Using initialData

Using prefetchQuery

User Store

Using Default Auth Store

Using Local Auth Store

changelog

svelte-query-pocketbase

1.1.0

Minor Changes

1.0.2

Patch Changes

1.0.1

Patch Changes

1.0.0

Major Changes

Patch Changes

0.0.1-beta.12

Patch Changes

0.0.1-beta.11

Patch Changes

0.0.1-beta.10

Patch Changes

0.0.1-beta.9

Patch Changes

0.0.1-beta.8

Patch Changes

0.0.1-beta.7

Patch Changes

0.0.1-beta.6

Patch Changes

0.0.1-beta.5

Patch Changes

0.0.1-beta.4

Patch Changes

0.0.1-beta.3

Patch Changes

0.0.1-beta.2

Patch Changes

0.0.1-beta.1

Patch Changes

0.0.1-beta.0

Patch Changes

Using `initialData`

Using `prefetchQuery`

Using `initialData`

Using `prefetchQuery`

Using `initialData`

Using `prefetchQuery`