Mobx Firebase Database

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>