redux-firestore icon indicating copy to clipboard operation
redux-firestore copied to clipboard

feat(store): store snapshot objects in state for use in pagination

Open jaschaio opened this issue 6 years ago • 6 comments

It would be great if I could access the original firestore client API objects through this library as well.

This begins at accessing the original firestore object I am passing over to the redux-firestore store enhancer and ends at the individual document snapshots I get back from api calls.

A simple example is that I would like to query the next set of documents within a collection startingFrom a document snapshot like described in the Firestore Documentation. This already works with redux-firestore, but I have to get the original document snapshot again myself as its not available through the store:

// Pseudo code

// Get Redux-Firestore Object from Store
const { firestore } = this.store;

// Get current State from Store
const { firestore: { ordered: { 'cars.1': items } } } = this.store.getState();

// Get Snapshot of the last queried document
var snapshot = await firestore.collection( 'cars' ).doc( items[ items.length - 1 ].id ).get();

// Do the firestore query with startFrom = snapshot to get the next page of results
firestore.get( {
    collection: 'cars',
    limit: 10,
    startAfter: snapshot
} );

This is suboptimal as redux-firestore should already have this snapshot, but it throws it away and only stores the data of each document snapshot.

jaschaio avatar Apr 16 '19 07:04 jaschaio

It is more common to try to keep plain js objects in redux state since that makes immutable state updates more clear. I am open to the idea of storing non-plain-js objects like snapshots in state, but would like to understand the possible performance impacts more fully before making the change.

prescottprue avatar Apr 19 '19 19:04 prescottprue

I am not a 100% familiar with how store enhancers actually work, but would having queried snapshots accessibe through a method on store.firestore be an option? If it is we could keep the redux store plain (which is mostly fine right now except for those cases where you need the original firestore snapshots).

jaschaio avatar Apr 22 '19 04:04 jaschaio

I have a plan of using WeakMap to cache DocumentSnapshot using the data from .data() as a key, where those data object has also been dispatched to redux. So that we can get snapshot directly using only plain object stored in redux.

const todoList = useSelector(state => state.firestore.ordered.todos)
const lastVisible = firestore.getSnapshotFromCache(todoList[todoList.length - 1])
// then use lastVisible as startAfter query in firestoreConnect, somehow

illuminist avatar May 24 '19 06:05 illuminist

@illuminist really like the idea of using WeakMap - open to a PR if you get a chance

prescottprue avatar May 31 '19 02:05 prescottprue

@illuminist Open to a PR if you get a chance otherwise I'll try to get to it when I can

prescottprue avatar Nov 01 '19 16:11 prescottprue

PR https://github.com/prescottprue/redux-firestore/pull/246

illuminist avatar Nov 12 '19 14:11 illuminist