Swr-firestore NPM

SWR Firestore

This is a collection of hooks to simplify the use of firestore with SWR. All hooks are tested against a real firebase project.

Example

Important: Make sure to memoize options if passed in to either useDocument or useCollection.

import { initializeApp } from 'firebase/app';
initializeApp(options); // setup firestore
// ...

import { useDocument, useCollection, UseDocumentOptions, UseCollectionOptions } from 'swr-firestore';
type Fruit = {name: string};

// below options declared outside to not require memoization
const documentListenOptions: UseDocumentOptions = {listen: true};
const collectionListenOptions: UseCollectionOptions = {listen: true};
const collectionQueryOptions: UseCollectionOptions = {constraints: where('color', '==', 'yellow')};

function TestComponent() {
  const { data: banana } = useDocument<Fruit>('fruits/banana');
  const { data: banana } = useDocument<Fruit>('fruits/banana', documentListenOptions); // subscribe to changes
  const { data: fruits } = useCollection<Fruit>('fruits');
  const { data: fruits } = useCollection<Fruit>('fruits', collectionListenOptions); // subscribe to changes
  const { data: yellowFruits } = useCollection<Fruit>('fruits', collectionQueryOptions);
}

Features

Typescript Enabled
Firebase 9.X
SWR 1.X
Minimal - no side effects, all hooks are optional and expose as much of firestore's functionality as possible. It's up to you how to configure firebase and SWR.
Tested against real data - tests run against a real firestore project
Retrieving a collection will automatically update SWR cache for individual documents
Listening/Subscribing to changes