<script>
import { Collection } from'$lib/database'import { Query } from'appwrite'constcollection=newCollection('[database-id]', '[collection-id]')const [subscriber, loading] =collection.createSubscriber([Query.limit(5) /*, ...queries */])// listen changes (update, delete) in database and automatically rerender on change// current data = [{ name: 'John', lastName: 'Doe' }, ...]constinsertSubscriber=collection.createObserver()// listen changes (create) in database and automatically rerender on changeconst [paginator, paginatorInitalLoading] =collection.createPaginate(10, [/* ...queries */])// paginate the collection of documents with limit and automatically rerender on change// paginator.next() makes the next request for items, paginator store automatically rerender on next loadconst [scrollData, scrollDispatch] =collection.createInfinityScrollDispatcher(10, [/* ...queries */], { /* intersection observer options */ })// load next data after scroll to anchor (scrollDispatch) element
</script>
<div>
{#if$loading}
<p>Loading data from database...</p>
{:else}
{#each [...$subscriber, ...$insertSubscriber] asitem}
<p>{item.name}</p>
{/each}
{/if}
</div>
<!-- scroll dispatcher example -->
<div>
{#each$scrollDataasitem}
<p>{item.name}</p>
{/each}
<divuse:scrollDispatchon:fetch={(e) =>console.log(e) /* on every fetch from scroll dispatcher do some action */} />
</div>
Files subscribers
<script>
import { Bucket } from'$lib/storage'import { Query } from'appwrite'constbucket=newBucket('[bucket-id]')const [files, loading] =bucket.createSubscriber([Query.limit(5) /*, ...queries */])// listen changes (update, delete) in files and automatically rerender on changeconstinsertSubscriber=bucket.createObserver()// listen changes (create) in files and automatically rerender on changeconst [upload, dispatch] =storage.createUploadDispatcher(/* many files ? true : false, default = false */)const [content, loading] =storage.getFileContent('6391f7c70ede82115575')// get file content and automatically rerender on file update
</script>
<div>
<inputtype="file"use:upload />
<buttonon:click={() =>dispatch().then(uploadedFile=>console.log(uploadedFile))}>Upload</button>
</div>