update database subscriber
This commit is contained in:
parent
cb4c5a875e
commit
02233b8941
35
README.md
35
README.md
|
@ -27,10 +27,10 @@ Included:
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
<script>
|
<script>
|
||||||
import { createCollectionSubscriber } from '$lib/database'
|
import CollectionSubscriber from '$lib/database'
|
||||||
import Layout from '$lib/components/Layout'
|
import Layout from '$lib/components/Layout'
|
||||||
|
|
||||||
const subscriber = createCollectionSubscriber('[database-id]', '[collection-id]')
|
const subscriber = new CollectionSubscriber('[database-id]', '[collection-id]')
|
||||||
// listen changes in database and automatically rerender on change
|
// listen changes in database and automatically rerender on change
|
||||||
// current data = [{ name: 'John', lastName: 'Doe' }, ...]
|
// current data = [{ name: 'John', lastName: 'Doe' }, ...]
|
||||||
</script>
|
</script>
|
||||||
|
@ -40,19 +40,32 @@ Included:
|
||||||
</Layout>
|
</Layout>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Realtime todo app using CollectionSubscriber
|
||||||
|
|
||||||
```svelte
|
```svelte
|
||||||
<script>
|
<script>
|
||||||
import { createDocumentSubscriber } from '$lib/database'
|
import CollectionSubscriber from '$lib/database'
|
||||||
import Layout from '$lib/components/Layout'
|
import Layout from '$lib/components/Layout'
|
||||||
|
|
||||||
const subscriber = createDocumentSubscriber('[database-id]', '[collection-id]', '[document-id]')
|
const subscriber = new CollectionSubscriber('[database-id]', '[collection-id]')
|
||||||
// listen changes in database and automatically rerender on change
|
let value = ''
|
||||||
// current data = { name: 'John', lastName: 'Doe' }
|
</script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
{$subscriber?.name ?? ''}
|
<div>
|
||||||
</Layout>
|
<input type="text" bind:value />
|
||||||
|
<button on:click={() => names.add({ name: value })}>Add</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{#each $subscriber as collectionDocument}
|
||||||
|
<div>
|
||||||
|
<p>{collectionDocument.name}</p>
|
||||||
|
<button on:click={() => names.delete(collectionDocument.$id)}>Remove</button>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Routing
|
## Routing
|
||||||
|
|
|
@ -1,16 +1,19 @@
|
||||||
import { writable } from 'svelte/store'
|
import { writable } from 'svelte/store'
|
||||||
import { client, databases } from './stores/appwrite'
|
import { client, databases } from './stores/appwrite'
|
||||||
import type { Models, RealtimeResponseEvent } from 'appwrite'
|
import type { Models, RealtimeResponseEvent } from 'appwrite'
|
||||||
|
import { ID } from 'appwrite'
|
||||||
|
|
||||||
export const createCollectionSubscriber = (databaseId: string, collectionId: string) => {
|
class CollectionSubscriber {
|
||||||
const store = writable<Models.Document[]>([])
|
protected store = writable<Models.Document[]>([])
|
||||||
|
public subscribe = this.store.subscribe
|
||||||
|
|
||||||
databases.listDocuments(databaseId, collectionId).then(data => store.set(data.documents))
|
constructor(protected databaseId: string, protected collectionId: string) {
|
||||||
|
databases.listDocuments(databaseId, collectionId).then(data => this.store.set(data.documents))
|
||||||
|
|
||||||
client.subscribe(`databases.${databaseId}.collections.${collectionId}.documents`, (response: RealtimeResponseEvent<any>) => {
|
client.subscribe(`databases.${databaseId}.collections.${collectionId}.documents`, (response: RealtimeResponseEvent<any>) => {
|
||||||
|
|
||||||
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.delete`)) {
|
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.delete`)) {
|
||||||
store.update(current => {
|
this.store.update(current => {
|
||||||
const index = current.findIndex(item => item.$id === response.payload.$id)
|
const index = current.findIndex(item => item.$id === response.payload.$id)
|
||||||
if (index === -1) return current
|
if (index === -1) return current
|
||||||
|
|
||||||
|
@ -21,7 +24,7 @@ export const createCollectionSubscriber = (databaseId: string, collectionId: str
|
||||||
}
|
}
|
||||||
|
|
||||||
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.update`)) {
|
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.update`)) {
|
||||||
store.update(current => {
|
this.store.update(current => {
|
||||||
const index = current.findIndex(item => item.$id === response.payload.$id)
|
const index = current.findIndex(item => item.$id === response.payload.$id)
|
||||||
if (index === -1) return current
|
if (index === -1) return current
|
||||||
|
|
||||||
|
@ -32,7 +35,7 @@ export const createCollectionSubscriber = (databaseId: string, collectionId: str
|
||||||
}
|
}
|
||||||
|
|
||||||
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.create`)) {
|
if (response.events.includes(`databases.${databaseId}.collections.${collectionId}.documents.*.create`)) {
|
||||||
store.update(current => {
|
this.store.update(current => {
|
||||||
current.push(response.payload)
|
current.push(response.payload)
|
||||||
return current
|
return current
|
||||||
})
|
})
|
||||||
|
@ -40,18 +43,19 @@ export const createCollectionSubscriber = (databaseId: string, collectionId: str
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return store
|
add(data: { [key: string]: any } = {}, permissions: string[] = null) {
|
||||||
|
return databases.createDocument(this.databaseId, this.collectionId, ID.unique(), data, permissions)
|
||||||
|
}
|
||||||
|
|
||||||
|
set(documentId: string, data: { [key: string]: any } = {}, permissions: string[] = null) {
|
||||||
|
return databases.updateDocument(this.databaseId, this.collectionId, documentId, data, permissions)
|
||||||
|
}
|
||||||
|
|
||||||
|
delete(documentId: string) {
|
||||||
|
return databases.deleteDocument(this.databaseId, this.collectionId, documentId)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const createDocumentSubscriber = (databaseId: string, collectionId: string, documentId: string) => {
|
export default CollectionSubscriber
|
||||||
const store = writable<Models.Document>(null)
|
|
||||||
|
|
||||||
databases.getDocument(databaseId, collectionId, documentId).then(data => store.set(data.documents))
|
|
||||||
|
|
||||||
client.subscribe(`databases.${databaseId}.collections.${collectionId}.documents.${documentId}`, (response) => {
|
|
||||||
store.set(response.payload as Models.Document)
|
|
||||||
})
|
|
||||||
|
|
||||||
return store
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue