datavan: in-memory mongodb for react that can track changes and sync with server
Features
- based on New React Context
- mongodb-like find(), update() api
- design with offline in mind
- customizable server fetch, submit, persistent, conflict-resolve logic
- built-in reselect-like memoizing layer
- supports server rendering
- code in es6, support tree-shaking
How It works?
During find(), datavan will query your local-data first. If local-data is missing, it will call your onFetch() as a side effect and update the local-data.
Table of Contents
Other Docs
Getting Started
const Van =
Setup
createDb
const db = db
data inside db
datavan will store docs in the following structure
const db = db = user_table: submits: id_1: _id: 'id_1' name: 'John' id_2: _id: 'id_2' name: 'May' // table of modified docs' originals originals: {} preloads: {} // server fetch times/markers (msec, to prevent re-fetch after server rendering) fetchAts: {}
Better Performance
memoize result and auto re-run
const Van = const withVan = const MyApp = ReactComponent
API
find, pick
db// Return: Array of documents
- collection: collection name
- query: Array | query-object (mongodb like query object, we use mingo to filter documents)
arr = db // query starts with $$ which trigger find within the result from onFetch responsearr = db userById = db
findAsync, pickAsync
db byId = db
Async function that always fetch and find data from server
findInMemory
like find() but only find in local memory
fetch
internally used by find(), findAsync() to call onFetch and return a raw result in promise. Without call findInMemory() after onFetch to normalise onFetch result.
get
doc = db
getById, getOriginals, getSubmits
// get all documents. This won't trigger onFetch()const docsTable = db // get local changed documentsconst dirtyDocs = db // get local changed documents' originalsconst originalDocs = db const docsPreloads = db
insert
Return: inserted docs
insertedDoc = db// can also insert arrayinsertedDocs = db
update
- update operations based on immutability-helper
const query = name: 'Mary' const mutation = $merge: name: 'Mary C' db
remove
remove all docs that match the query
db
mutate
mutate documents using immutability-helper syntax
// merge by doc iddb // merge by array of pathdb // merge in many docsdb
set
shortcut of mutate which always use { $set: value }
invalidate
// invalidate all collectionsdb // invalidate one collection (all docs)db // invalidate one collection (some docs)db
reset
reset local change and re-fetch in future get/find
// reset all collectionsdb // reset one collection (all docs)db // reset one collection (some docs)db
load
load bulk data into store. data can be
db
- Array of docs
- Or a object with
{ byId: {}, originals: {}, fetchAts: {} }
- Or Table of docs
// Array of docsdb // Or a object with at least one of `{ byId: {}, originals: {}, fetchAts: {} }`db // Or Table of docs (byId)db // load collectionsdb
- load() data will consider as fill data from backend and trigger re-render
recall
call a function (anonymous or collection-defined) only-if store data or argument changed. If no changes, cached result will be used.
// recall collection-defined functionconst db = const result = db