Skip to content

Implement Vercel's useSWR for querying Firestore in React/React Native/Expo apps. πŸ‘©β€πŸš’πŸ”₯

License

Notifications You must be signed in to change notification settings

rolznz/swr-firestore

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

SWR Firestore

Fork

This fork fixes a number of issues in the original repository, which is no longer maintained. See more here: nandorojo#117 (comment)

Introduction

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

Supported Hooks

  • useCollection
  • useDocument

Testing

In order to run the tests you need a firebase project. The test data will be created at the start of the test run.

Run Tests

yarn test

License

MIT

About

Implement Vercel's useSWR for querying Firestore in React/React Native/Expo apps. πŸ‘©β€πŸš’πŸ”₯

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 90.8%
  • JavaScript 9.2%