https://github.com/lewis-wow/svelte-appwrite

Svelte + Appwrite
https://github.com/lewis-wow/svelte-appwrite

Last synced: 4 days ago
JSON representation

Svelte + Appwrite

• Host: GitHub
• URL: https://github.com/lewis-wow/svelte-appwrite
• Owner: lewis-wow
• Created: 2022-12-25T19:36:52.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-01-02T20:49:51.000Z (almost 2 years ago)
• Last Synced: 2024-11-16T18:04:41.087Z (about 1 month ago)
• Language: TypeScript
• Size: 69.3 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Svelte + Appwrite

## Database subscribers

```svelte

  import { Collection } from '$lib/database'

  import { Query } from 'appwrite'

  const collection = new Collection('[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' }, ...]

  const insertSubscriber = collection.createObserver()

  // listen changes (create) in database and automatically rerender on change

  const [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 load

  const [scrollData, scrollDispatch] = collection.createInfinityScrollDispatcher(10, [/* ...queries */], { /* intersection observer options */ })

  // load next data after scroll to anchor (scrollDispatch) element



  {#if $loading}

    
Loading data from database...

  {:else}

    {#each [...$subscriber, ...$insertSubscriber] as item}

      
{item.name}

    {/each}

  {/if}





  {#each $scrollData as item}

    
{item.name}

  {/each}

  
 console.log(e) /* on every fetch from scroll dispatcher do some action */} />



```


## Files subscribers

```svelte

  import { Bucket } from '$lib/storage'

  import { Query } from 'appwrite'

  const bucket = new Bucket('[bucket-id]')

  const [files, loading] = bucket.createSubscriber([Query.limit(5) /*, ...queries */])

  // listen changes (update, delete) in files and automatically rerender on change

  const insertSubscriber = bucket.createObserver()

  // listen changes (create) in files and automatically rerender on change

  const [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



  

   dispatch().then(uploadedFile => console.log(uploadedFile))}>Upload 



```