svelte-firebase-state

Firebase utilities for Svelte 5.

npm install svelte-firebase-state
GitHub Github
Version 1.3.2
Svelte Playground ->

DocumentState manages a single Firestore document.
Fetch data, listen for real-time updates and save changes to Firebase.

Quick example:

demo

Parameters:

required

firestore Firestore

The firebase firestore instance.

optional

auth Auth

The firebase auth instance.

optional

listen boolean

default = false

Listen for real-time updates.

optional

path string

The path to the document.

optional

collectionPath string

The path to the collection. Should be used with the query param.

optional

query (user: User | null) => QueryConstraint[]

Function that returns the query constraints. Should be used with the collectionPath param.

optional

fromFirestore (snapshot) => DataApp

default = snap => ({ ...snap.data(), id: snap.id })

Function that converts the Firestore data to the app data

optional

toFirestore (data: DataApp) => DataDb

default = data => data

Function that converts the app data to the firestore data

Properties:

data AppData | null | undefined

Reactive state that holds the collection data. The data is undefined when loading. The data is null when the document could not be found.

loading boolean

Reactive state indicating if the document data is loading.

Methods:

save (key?: K, update?: DataApp[K] | ((prevValue: DataApp[K]) => DataApp[K])) => Promise<void>

Save changes to the document.

refetch () => Promise<void>

Refetch the document data.

get_doc_ref () => Promise<DocumentReference | undefined | null>

Get the document reference.

More examples:

Fetch a document & listen for changes

demo

Query a document in a collection

demo