Skip to content

rakannimer/mobx-firebase-database

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mobx Firebase Database

CircleCI NPM BundlePhobia

mobx-firebase-database allows you to map your Firebase data to MobX observables and interact with/react to it using MobX.

Install

  yarn add mobx-firebase-database
  # If you're using firebase web
  yarn add firebase
  # If you're using firebase-admin
  yarn add firebase-admin
  # If you're using react-native-firebase
  yarn add react-native-firebase

Peer Dependencies

mobx-firebase-database works with : firebase, firebase-admin and react-native-firebase

Depending on which one you're using you will need to have it installed.

Usage

Web

Before starting to code, you need to get your Firebase Credentials :

Follow the steps here to get your config.

import getMobxFire from "mobx-firebase-database";
import firebase from "firebase/app";
import "firebase/database";

// Don't worry about calling it more than once.
const { toBox, toMap, getFirebaseRef, destroy } = getMobxFire({
  config,
  firebase
});

// toBox
const postId = `my_post_id`;
const postRef = getFirebaseRef({ path: `posts/${postId}` });
const { value, unsub } = toBox(postRef);

const post = value.get(); // always contains the latest value of posts/${postId}
await postRef.update({ last_seen_at: firebase.database.ServerValue.TIMESTAMP });
value.get(); // {...post, last_seen_at: number}
await postRef.set(null);
value.get(); // null

// toMap
const postId = `my_post_id`;
const postsRef = getFirebaseRef({ path: `posts`, orderByKey: true });
const { value, unsub } = toMap(postRef);
const allPostsIds = value.keys();
const post = value.get(`${postId}`);

API

mobxFirebaseDatabase

Input :

getMobxFire requires as input an object with shape :

  • config:
{
  apiKey: string,
  authDomain: string,
  databaseURL: string,
  storageBucket: string
}
  • firebase : Firebase web client from firebase package

Output :

Object with shape :

type Output<T> = {
  toArray: ToArray;
  toBox: ToBox;
  toMap: ToMap;
  getFirebaseRef: (query: FirebaseQuery) => any;
  destroy: () => void;
};

toBox and toMap

Input

All methods take in 2 arguments, the first is required and the second optional :

  • ref : Any firebase ref, with or without sorting and/or limiting.
  • options : depends on the method
toBox
type ToBoxOptions<V> = {
  map?: (m: V) => any;
  filter?: (m: V) => boolean;
  initial?: V | null;
};
toMap
type ToMapOptions<K, V> = {
  mapKey?: (m: K) => any;
  mapValue?: (m: V) => any;
  filter?: (prevValue: V, currentValue: V) => boolean;
  initial?: ObservableMap<K, V>;
};

Output

An object with the following shape :

  • value : Observable box with the latest value of the ref inside, or null if it doesn't exist or is not fetched yet.

  • unsub : A function to turn off the firebase ref listener when you don't need it anymore.

toBox
const { value, unsub } = toBox(ref, { initial: "something" });
toMap
const { value: map, keys } = toMap(ref);
// map: ObservableMap<string, any>
// keys: IObservableArray<string>