Create, Read, Update, Delete

Read

Collection

You can use the collectionStore or getCollection methods to retrieve a collection of documents. The collectionStore method is reactive and will update the data in real-time. The getCollection method is not reactive and will only fetch the data once. Here's an example of the collectionStore method (click the Code button to see the code):

See [Load Data in Load function] for a SSR + realtime-updating client side experience.

I used to document how to use the <Collection> component as well, but for archicture reasons, I encourage you to pass data in through the page data prop. See Fireship's <Collection> or read the code if you want it.

Document

There are a few ways to read a document:

• getDocument loads the current state
• docStore returns a store that updates in real-time. It starts with a null value but you can pass in a value to startWith.
• awaitableDocStore is a combination of the above two methods. It is useful in page load functions where you want to wait for the data to load before rendering the page, but you also want that data to continue updating in the client.
• getDocumentOrError is a better version of getDocument that includes error handling.

I used to document how to use the <Doc> component as well, but for archicture reasons, I encourage you to pass data in through the page data prop. See Fireship's <Doc> or read the code if you want it.

Create using add

The add method has the same behavior as Firestore's addDoc method but simplifies the setup by automatically creating a collection reference from a path string. It also adds 4 metadata fields: createdAt, createdBy, updatedAt, updatedBy.

Say hello to add your greeting to the list of greetings seen above:

Update

Did you try the Update buttons in the list above? Similar to the add method, update has the same behavior as Firestore's updateDoc method but simplifies the setup by automatically creating a document reference from a path string. It will leave alone the createdAt and createdBy fields and just update the updatedAt and updatedBy fields. Here's the code for that:

ts
import { update } from 'sveltefirets';
import type { Message } from '$lib/message.interface';
function updateName(id: string, name: string) {
  update<Message>(`messages/${id}`, { text: 'Hello from ' + name });
}

Delete

Did you try the Delete buttons in the list above? (Go easy so others have samples to view). Here's the code for that:

ts
import { deleteDocument } from 'sveltefirets';
function deleteGreeting(id: string) {
  deleteDocument(`messages/${id}`);
}

Set

set operates a little different than Firebase's setDoc method. It will first check if the document you are setting already exists. If so, it will use the update method. If not, it will use setDoc but with the same 4 metadata additions added by the add method described above.

ts
import { set } from 'sveltefirets';
import type { Message } from '$lib/message.interface';
function setName(id: string, name: string) {
  set<Message>(`messages/${id}`, { text: 'Hello from ' + name });
}

There may be a case for renaming this as upsert in the future and creating a new set method that more closely resembles the Firebase setDoc.