{"id":13409642,"url":"https://github.com/goknsh/svelte-query-pocketbase","last_synced_at":"2026-01-14T20:40:07.335Z","repository":{"id":65481407,"uuid":"593112022","full_name":"goknsh/svelte-query-pocketbase","owner":"goknsh","description":"TanStack Query wrappers around Pocketbase Realtime for Svelte","archived":true,"fork":false,"pushed_at":"2024-03-14T00:43:07.000Z","size":742,"stargazers_count":18,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-09T13:33:15.591Z","etag":null,"topics":["pocketbase","pocketbase-realtime","realtime","svelte","svelte-store","tanstack","tanstack-query"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/goknsh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-25T09:10:19.000Z","updated_at":"2024-03-14T00:43:20.000Z","dependencies_parsed_at":"2024-03-14T01:46:48.816Z","dependency_job_id":"724bd298-915f-4841-bc60-bb55164d512a","html_url":"https://github.com/goknsh/svelte-query-pocketbase","commit_stats":{"total_commits":31,"total_committers":2,"mean_commits":15.5,"dds":0.4516129032258065,"last_synced_commit":"01011d5dc60224518ac2acc825fb204c7684f706"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/goknsh/svelte-query-pocketbase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goknsh%2Fsvelte-query-pocketbase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goknsh%2Fsvelte-query-pocketbase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goknsh%2Fsvelte-query-pocketbase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goknsh%2Fsvelte-query-pocketbase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/goknsh","download_url":"https://codeload.github.com/goknsh/svelte-query-pocketbase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/goknsh%2Fsvelte-query-pocketbase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28434486,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T18:57:19.464Z","status":"ssl_error","status_checked_at":"2026-01-14T18:52:48.501Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pocketbase","pocketbase-realtime","realtime","svelte","svelte-store","tanstack","tanstack-query"],"created_at":"2024-07-30T20:01:02.504Z","updated_at":"2026-01-14T20:40:07.313Z","avatar_url":"https://github.com/goknsh.png","language":"TypeScript","funding_links":[],"categories":["Svelte","JavaScript/TypeScript"],"sub_categories":["Svelte"],"readme":"\u003e [!WARNING]\n\u003e The repository is no longer being worked on, and the npm package has been deprecated. Feel free to fork and continue development.\n\n# svelte-query-pocketbase\n\nTanStack Query wrappers around Pocketbase Realtime for Svelte.\n\n## Installation\n\n```\nnpm i -D svelte-query-pocketbase\n```\n\n## Record Query\n\nCreates a TanStack Query that updates a Pocketbase record in realtime. View the JSDoc for the relevant functions for more documentation on their available options.\n\n### Simple Example\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createRecordQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\tconst someRecord = createRecordQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection),\n\t\t'some_id'\n\t);\n\u003c/script\u003e\n\n{#if $someRecord.data}\n\t\u003cp\u003eFetched record:\u003c/p\u003e\n\t\u003cpre\u003e{JSON.stringify($someRecord.data, null, 2)}\u003c/pre\u003e\n{:else if $someRecord.error}\n\t{#if $someRecord.error.status === 404}\n\t\t\u003cp\u003eThe record couldn't be found in the database.\u003c/p\u003e\n\t{:else}\n\t\t\u003cp\u003eSomething went wrong.\u003c/p\u003e\n\t\t\u003cbutton on:click={() =\u003e $someRecord.refetch()}\u003eTry again\u003c/button\u003e\n\t{/if}\n{:else}\n\t\u003cp\u003eLoading...\u003c/p\u003e\n{/if}\n```\n\n\u003c/details\u003e\n\n### With Query Params\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createRecordQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\tconst someRecord = createRecordQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection),\n\t\t'some_id',\n\t\t{\n\t\t\tqueryParams: {\n\t\t\t\texpand: 'some_field',\n\t\t\t\tfields: 'some_field' // the library will internally add id and updated to this\n\t\t\t}\n\t\t}\n\t);\n\u003c/script\u003e\n\n{#if $someRecord.data}\n\t\u003cp\u003eFetched record, with some_field expanded:\u003c/p\u003e\n\t\u003cpre\u003e{JSON.stringify($someRecord.data, null, 2)}\u003c/pre\u003e\n{:else if $someRecord.error}\n\t{#if $someRecord.error.status === 404}\n\t\t\u003cp\u003eThe record couldn't be found in the database.\u003c/p\u003e\n\t{:else}\n\t\t\u003cp\u003eSomething went wrong.\u003c/p\u003e\n\t\t\u003cbutton on:click={() =\u003e $someRecord.refetch()}\u003eTry again\u003c/button\u003e\n\t{/if}\n{:else}\n\t\u003cp\u003eLoading...\u003c/p\u003e\n{/if}\n```\n\n\u003c/details\u003e\n\n### Using SSR\n\nRead [TanStack Query's docs on this](https://tanstack.com/query/v4/docs/svelte/ssr) first. The examples below are modified versions of the examples on that page.\n\n#### Using `initialData`\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n**src/routes/+page.ts**\n\n```ts\nimport type { PageLoad } from './$types';\n\nimport Pocketbase from 'pocketbase';\nimport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n// Types generated from https://github.com/patmood/pocketbase-typegen\nimport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\nimport { createRecordQueryInitialData } from 'svelte-query-pocketbase';\n\nexport const load: PageLoad = async () =\u003e {\n\tconst someIdInitialData = await createRecordQueryInitialData\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection),\n\t\t'some_id'\n\t);\n\treturn { someIdInitialData };\n};\n```\n\n**src/routes/+page.svelte**\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\timport type { PageData } from './$types';\n\texport let data: PageData;\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createRecordQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\tconst someRecord = createRecordQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection),\n\t\t'some_id',\n\t\t{\n\t\t\tinitialData: data.someIdInitialData\n\t\t}\n\t);\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n#### Using `prefetchQuery`\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n**src/routes/+layout.ts**\n\n_Same as TanStack Query's docs_\n\n**src/routes/+layout.svelte**\n\n_Same as TanStack Query's docs_\n\n**src/routes/+page.ts**\n\n```ts\nimport type { PageLoad } from './$types';\n\nimport Pocketbase from 'pocketbase';\nimport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n// Types generated from https://github.com/patmood/pocketbase-typegen\nimport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\nimport { createRecordQueryPrefetch } from 'svelte-query-pocketbase';\n\nexport const load: PageLoad = async ({ parent }) =\u003e {\n\tconst { queryClient } = await parent();\n\n\t// As long as the same collection, id, and queryParams are supplied to\n\t// `createRecordQueryPrefetch` and `createRecordQuery`, the library will\n\t// generate the same `queryKey`s for both functions, and you need not specify one\n\tawait queryClient.prefetchQuery(\n\t\tcreateRecordQueryPrefetch\u003cSomeCollectionResponse\u003e(\n\t\t\tpocketbase.collection(Collections.SomeCollection),\n\t\t\t'some_id'\n\t\t)\n\t);\n};\n```\n\n**src/routes/+page.svelte**\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\timport type { PageData } from './$types';\n\texport let data: PageData;\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createRecordQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\t// This data is cached by prefetchQuery in +page.ts so no fetch actually happens here\n\tconst someRecord = createRecordQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection),\n\t\t'some_id'\n\t);\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n## Collection Query\n\nCreates 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.\n\n### Simple Example\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createCollectionQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\tconst someCollection = createCollectionQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection)\n\t);\n\u003c/script\u003e\n\n{#if $someCollection.data}\n\t\u003cp\u003eFetched collection:\u003c/p\u003e\n\t\u003cpre\u003e{JSON.stringify($someCollection.data, null, 2)}\u003c/pre\u003e\n{:else if $someCollection.error}\n\t{#if $someCollection.error.status === 404}\n\t\t\u003cp\u003eThe collection couldn't be found in the database.\u003c/p\u003e\n\t{:else}\n\t\t\u003cp\u003eSomething went wrong.\u003c/p\u003e\n\t\t\u003cbutton on:click={() =\u003e $someCollection.refetch()}\u003eTry again\u003c/button\u003e\n\t{/if}\n{:else}\n\t\u003cp\u003eLoading...\u003c/p\u003e\n{/if}\n```\n\n\u003c/details\u003e\n\n### With Query Params\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createCollectionQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\tconst someCollection = createCollectionQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection),\n\t\t{\n\t\t\tqueryParams: {\n\t\t\t\texpand: 'some_field',\n\t\t\t\tsort: '-created', // sort by date created, descending\n\t\t\t\tfilter: 'created \u003e= \"2022-01-01 00:00:00\"',\n\t\t\t\tfields: 'some_field' // the library will internally add id and updated to this\n\t\t\t},\n\t\t\t// sortFunction and filterFunction are applied after a realtime update is applied\n\t\t\tsortFunction: (a, b) =\u003e new Date(a.created) - new Date(b.created) // sort by date created, descending\n\t\t\tfilterFunction: (record) =\u003e new Date(record.created) \u003e= new Date(\"2022-01-01 00:00:00\")\n\t\t}\n\t);\n\u003c/script\u003e\n\n{#if $someCollection.data}\n\t\u003cp\u003e\n\t\tFetched collection, with some_field expanded, sorted by date created (descending), and filtered\n\t\tby date created after 2022-01-01 00:00:00:\n\t\u003c/p\u003e\n\t\u003cpre\u003e{JSON.stringify($someCollection.data, null, 2)}\u003c/pre\u003e\n{:else if $someCollection.error}\n\t{#if $someCollection.error.status === 404}\n\t\t\u003cp\u003eThe collection couldn't be found in the database.\u003c/p\u003e\n\t{:else}\n\t\t\u003cp\u003eSomething went wrong.\u003c/p\u003e\n\t\t\u003cbutton on:click={() =\u003e $someCollection.refetch()}\u003eTry again\u003c/button\u003e\n\t{/if}\n{:else}\n\t\u003cp\u003eLoading...\u003c/p\u003e\n{/if}\n```\n\n\u003c/details\u003e\n\n### Using SSR\n\nRead [TanStack Query's docs on this](https://tanstack.com/query/v4/docs/svelte/ssr) first. The examples below are modified versions of the examples on that page.\n\n#### Using `initialData`\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n**src/routes/+page.ts**\n\n```ts\nimport type { PageLoad } from './$types';\n\nimport Pocketbase from 'pocketbase';\nimport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n// Types generated from https://github.com/patmood/pocketbase-typegen\nimport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\nimport { createCollectionQueryInitialData } from 'svelte-query-pocketbase';\n\nexport const load: PageLoad = async () =\u003e {\n\tconst someCollectionInitialData = await createCollectionQueryInitialData\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection)\n\t);\n\treturn { someCollectionInitialData };\n};\n```\n\n**src/routes/+page.svelte**\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\timport type { PageData } from './$types';\n\texport let data: PageData;\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createCollectionQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\tconst someCollection = createCollectionQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection),\n\t\t{\n\t\t\tinitialData: data.someCollectionInitialData\n\t\t}\n\t);\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n#### Using `prefetchQuery`\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n**src/routes/+layout.ts**\n\n_Same as TanStack Query's docs_\n\n**src/routes/+layout.svelte**\n\n_Same as TanStack Query's docs_\n\n**src/routes/+page.ts**\n\n```ts\nimport type { PageLoad } from './$types';\n\nimport Pocketbase from 'pocketbase';\nimport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n// Types generated from https://github.com/patmood/pocketbase-typegen\nimport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\nimport { createCollectionQueryPrefetch } from 'svelte-query-pocketbase';\n\nexport const load: PageLoad = async ({ parent }) =\u003e {\n\tconst { queryClient } = await parent();\n\n\t// As long as the same collection, id, and queryParams are supplied to\n\t// `createCollectionQueryPrefetch` and `createCollectionQuery`, the library will\n\t// generate the same `queryKey`s for both functions, and you need not specify one\n\tawait queryClient.prefetchQuery(\n\t\tcreateCollectionQueryPrefetch\u003cSomeCollectionResponse\u003e(\n\t\t\tpocketbase.collection(Collections.SomeCollection)\n\t\t)\n\t);\n};\n```\n\n**src/routes/+page.svelte**\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\timport type { PageData } from './$types';\n\texport let data: PageData;\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createCollectionQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\t// This data is cached by prefetchQuery in +page.ts so no fetch actually happens here\n\tconst someCollection = createCollectionQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection)\n\t);\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n## Infinite Collection Query\n\nCreates 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.\n\n### Simple Example\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createInfiniteCollectionQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\tconst someInfiniteCollection = createInfiniteCollectionQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection)\n\t);\n\u003c/script\u003e\n\n{#if $someInfiniteCollection.data}\n\t\u003cp\u003eFetched infinite collection:\u003c/p\u003e\n\t\u003cpre\u003e{JSON.stringify($someInfiniteCollection.data, null, 2)}\u003c/pre\u003e\n\t{#if $someInfiniteCollection.hasNextPage}\n\t\t\u003cbutton\n\t\t\ton:click={() =\u003e $someInfiniteCollection.fetchNextPage()}\n\t\t\tdisabled={$someInfiniteCollection.isFetchingNextPage}\n\t\t\t\u003e{$someInfiniteCollection.isFetchingNextPage\n\t\t\t\t? 'Fetching next page...'\n\t\t\t\t: 'Fetch next page'}\u003c/button\n\t\t\u003e\n\t{/if}\n{:else if $someInfiniteCollection.error}\n\t{#if $someInfiniteCollection.error.status === 404}\n\t\t\u003cp\u003eThe collection couldn't be found in the database.\u003c/p\u003e\n\t{:else}\n\t\t\u003cp\u003eSomething went wrong.\u003c/p\u003e\n\t\t\u003cbutton on:click={() =\u003e $someInfiniteCollection.refetch()}\u003eTry again\u003c/button\u003e\n\t{/if}\n{:else}\n\t\u003cp\u003eLoading...\u003c/p\u003e\n{/if}\n```\n\n\u003c/details\u003e\n\n### With Query Params\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createInfiniteCollectionQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\tconst someInfiniteCollection = createInfiniteCollectionQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection),\n\t\t{\n\t\t\tqueryParams: {\n\t\t\t\texpand: 'some_field',\n\t\t\t\tsort: '-created', // sort by date created, descending\n\t\t\t\tfilter: 'created \u003e= \"2022-01-01 00:00:00\"',\n\t\t\t\tfields: 'some_field' // the library will internally add id and updated to this\n\t\t\t},\n\t\t\t// sortFunction and filterFunction are applied after a realtime update is applied\n\t\t\tsortFunction: (a, b) =\u003e new Date(a.created) - new Date(b.created) // sort by date created, descending\n\t\t\tfilterFunction: (record) =\u003e new Date(record.created) \u003e= new Date(\"2022-01-01 00:00:00\")\n\t\t}\n\t);\n\u003c/script\u003e\n\n{#if $someInfiniteCollection.data}\n\t\u003cp\u003e\n\t\tFetched infinite collection, with some_field expanded, sorted by date created (descending), and\n\t\tfiltered by date created after 2022-01-01 00:00:00:\n\t\u003c/p\u003e\n\t\u003cpre\u003e{JSON.stringify($someInfiniteCollection.data, null, 2)}\u003c/pre\u003e\n\t{#if $someInfiniteCollection.hasNextPage}\n\t\t\u003cbutton\n\t\t\ton:click={() =\u003e $someInfiniteCollection.fetchNextPage()}\n\t\t\tdisabled={$someInfiniteCollection.isFetchingNextPage}\n\t\t\t\u003e{$someInfiniteCollection.isFetchingNextPage\n\t\t\t\t? 'Fetching next page...'\n\t\t\t\t: 'Fetch next page'}\u003c/button\n\t\t\u003e\n\t{/if}\n{:else if $someInfiniteCollection.error}\n\t{#if $someInfiniteCollection.error.status === 404}\n\t\t\u003cp\u003eThe collection couldn't be found in the database.\u003c/p\u003e\n\t{:else}\n\t\t\u003cp\u003eSomething went wrong.\u003c/p\u003e\n\t\t\u003cbutton on:click={() =\u003e $someInfiniteCollection.refetch()}\u003eTry again\u003c/button\u003e\n\t{/if}\n{:else}\n\t\u003cp\u003eLoading...\u003c/p\u003e\n{/if}\n```\n\n\u003c/details\u003e\n\n### Using SSR\n\nRead [TanStack Query's docs on this](https://tanstack.com/query/v4/docs/svelte/ssr) first. The examples below are modified versions of the examples on that page.\n\n#### Using `initialData`\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n**src/routes/+page.ts**\n\n```ts\nimport type { PageLoad } from './$types';\n\nimport Pocketbase from 'pocketbase';\nimport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n// Types generated from https://github.com/patmood/pocketbase-typegen\nimport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\nimport { infiniteCollectionQueryInitialData } from 'svelte-query-pocketbase';\n\nexport const load: PageLoad = async () =\u003e {\n\tconst someInfiniteCollectionInitialData =\n\t\tawait infiniteCollectionQueryInitialData\u003cSomeCollectionResponse\u003e(\n\t\t\tpocketbase.collection(Collections.SomeCollection)\n\t\t);\n\treturn { someInfiniteCollectionInitialData };\n};\n```\n\n**src/routes/+page.svelte**\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\timport type { PageData } from './$types';\n\texport let data: PageData;\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createInfiniteCollectionQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\tconst someInfiniteCollection = createInfiniteCollectionQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection),\n\t\t{\n\t\t\tinitialData: data.someInfiniteCollectionInitialData\n\t\t}\n\t);\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n#### Using `prefetchQuery`\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n**src/routes/+layout.ts**\n\n_Same as TanStack Query's docs_\n\n**src/routes/+layout.svelte**\n\n_Same as TanStack Query's docs_\n\n**src/routes/+page.ts**\n\n```ts\nimport type { PageLoad } from './$types';\n\nimport Pocketbase from 'pocketbase';\nimport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n// Types generated from https://github.com/patmood/pocketbase-typegen\nimport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\nimport { infiniteCollectionQueryPrefetch } from 'svelte-query-pocketbase';\n\nexport const load: PageLoad = async ({ parent }) =\u003e {\n\tconst { queryClient } = await parent();\n\n\t// As long as the same collection, id, and queryParams are supplied to\n\t// `infiniteCollectionQueryPrefetch` and `createCollectionQuery`, the library will\n\t// generate the same `queryKey`s for both functions, and you need not specify one\n\tawait queryClient.prefetchQuery(\n\t\tinfiniteCollectionQueryPrefetch\u003cSomeCollectionResponse\u003e(\n\t\t\tpocketbase.collection(Collections.SomeCollection)\n\t\t)\n\t);\n};\n```\n\n**src/routes/+page.svelte**\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\timport type { PageData } from './$types';\n\texport let data: PageData;\n\n\t// Types generated from https://github.com/patmood/pocketbase-typegen\n\timport { Collections, type SomeCollectionResponse } from '$lib/collections';\n\n\timport { createInfiniteCollectionQuery } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\t// This data is cached by prefetchQuery in +page.ts so no fetch actually happens here\n\tconst someInfiniteCollection = createInfiniteCollectionQuery\u003cSomeCollectionResponse\u003e(\n\t\tpocketbase.collection(Collections.SomeCollection)\n\t);\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n## User Store\n\nSvelte store wrapper around the authenticated Pocketbase user that updates in realtime.\n\n### Using Default Auth Store\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\timport { userStore, type KnownUser } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);\n\n\tinterface CustomKnownUser extends KnownUser {\n\t\tid: string;\n\t\tname: string;\n\t\tusername: string;\n\t\tavatar?: string;\n\t}\n\n\tconst user = userStore\u003cCustomKnownUser\u003e(pocketbase, (authStore) =\u003e ({\n\t\tisLoggedIn: true,\n\t\tid: authStore.model?.id ?? '',\n\t\tavatar: authStore.model?.avatar,\n\t\tusername: authStore.model?.username ?? ''\n\t\tname: authStore.model?.name ?? '',\n\t}));\n\u003c/script\u003e\n\n{#if $user.isLoggedIn}\n\t\u003cp\u003eWelcome, {$user.name}:\u003c/p\u003e\n\t\u003cpre\u003e{JSON.stringify($user, null, 2)}\u003c/pre\u003e\n{:else}\n\t\u003cp\u003eYou are not logged in.\u003c/p\u003e\n{/if}\n```\n\n\u003c/details\u003e\n\n### Using Local Auth Store\n\n\u003cdetails\u003e\n\t\u003csummary\u003eView Code\u003c/summary\u003e\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Pocketbase, { LocalAuthStore } from 'pocketbase';\n\timport { PUBLIC_POCKETBASE_URL } from '$env/static/public';\n\n\timport { userStore, type KnownUser } from 'svelte-query-pocketbase';\n\n\tconst pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL, new LocalAuthStore(\"authInfo\"));\n\n\tinterface CustomKnownUser extends KnownUser {\n\t\tid: string;\n\t\tname: string;\n\t\tusername: string;\n\t\tavatar?: string;\n\t}\n\n\tconst user = userStore\u003cCustomKnownUser, LocalAuthStore\u003e(pocketbase, (authStore) =\u003e ({\n\t\tisLoggedIn: true,\n\t\tid: authStore.model?.id ?? '',\n\t\tavatar: authStore.model?.avatar,\n\t\tusername: authStore.model?.username ?? ''\n\t\tname: authStore.model?.name ?? '',\n\t}));\n\u003c/script\u003e\n\n{#if $user.isLoggedIn}\n\t\u003cp\u003eWelcome, {$user.name}:\u003c/p\u003e\n\t\u003cpre\u003e{JSON.stringify($user, null, 2)}\u003c/pre\u003e\n{:else}\n\t\u003cp\u003eYou are not logged in.\u003c/p\u003e\n{/if}\n```\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoknsh%2Fsvelte-query-pocketbase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoknsh%2Fsvelte-query-pocketbase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoknsh%2Fsvelte-query-pocketbase/lists"}