Pfthb

I run a chat application with Firebase Firestore and it works all super well, however I'm running into the following issue:

For paginating my conversations & chats I use query cursors for my listeners. I save these query cursors into my state (vuex) so I can access them later when needed. That works and I can paginate my chat messages and conversations.

I create query cursors like so:

const query = await ref.get()
const cursor = query.docs[query.docs.length - 1]
commit('SET_CONVERSATIONS_QUERY_CURSOR', cursor)

And later use them in the next query like so:

.startAfter(state.conversations.queryCursor)

Everything actually works perfect.

My issue now is that that cursor saved in my state seem to be updated regularly (...why Firebase?) & especially directly. This gives me the following error messages when using vuex strict-mode (-> not allowed to access the state directly):

app.js:506 Error: [vuex] Do not mutate vuex store state outside
mutation handlers.

Now I of course want to use strict mode to avoid mutation state directly, but I can't due to the query cursors in my state.

I tried to clone the cursor before saving in to the store, but shallow clones did no good and deep clones did not work because of Converting circular structure to JSON.

So...

• Is there a recommended way on how to store query cursors for later use?


• Are there options to just store the id of a document and later "recreate" a query cursor?

Thanks!