CODEWITHSUNDEEP
firebasevue.jsgoogle-cloud-firestorevuexnuxt.js
Pascal
Pascal

Reputation: 1751

Proper way to handle Query Cursor in Google Firestore? (Vue/Nuxt.js)

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...

Thanks!

Upvotes: 3

Views: 307

Answers (1)

Evaldas B
Evaldas B

Reputation: 2594

You can prevent javascript object from getting modified by using Object.freeze(obj).

So in your case it should be const cursor = Object.freeze(query.docs[query.docs.length - 1])

Upvotes: 1

Related Questions