programing

Google Firestore에서 쿼리 커서를 처리하는 올바른 방법(Vue/Nuxt.js)

copyandpastes 2022. 7. 2. 21:24
반응형

Google Firestore에서 쿼리 커서를 처리하는 올바른 방법(Vue/Nuxt.js)

Firebase Firestore에서 채팅 어플리케이션을 실행하고 있는데, 모두 매우 잘 작동하지만 다음과 같은 문제가 있습니다.

대화 및 채팅 페이지 작성에는 청취자용 쿼리 커서를 사용합니다.나중에 필요할 때 액세스할 수 있도록 이러한 쿼리 커서를 내 상태(vuex)에 저장합니다.그러면 채팅 메시지와 대화에 페이지 수를 매길 수 있습니다.

다음과 같이 쿼리 커서를 만듭니다.

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

그리고 나중에 다음과 같이 다음 쿼리에서 사용합니다.

.startAfter(state.conversations.queryCursor)

모든 것이 완벽하게 작동한다.

현재 문제는 내 주에 저장된 커서가 정기적으로 업데이트되는 것 같다는 것입니다(...왜 Firebase일까요?)특히 직접.이것에 의해, vuex strict-mode(-> 직접 스테이트에 액세스 할 수 없습니다)를 사용하고 있는 경우는, 다음의 에러 메세지가 표시됩니다.

app.js:506 오류: [vuex] 변환 핸들러 외부에 있는 vuex 스토어 상태를 변환하지 않습니다.

물론 변환 상태를 직접 피하기 위해 엄밀한 모드를 사용하고 싶지만 내 상태의 쿼리 커서 때문에 사용할 수 없습니다.

스토어에 저장하기 전에 커서를 복제하려고 했지만 얕은 클론이 작동하지 않았고 깊은 클론이 동작하지 않았습니다.Converting circular structure to JSON.

그래서...

  • 나중에 사용할 수 있도록 쿼리 커서를 저장하는 권장 방법이 있습니까?
  • 문서의 ID만 저장하고 나중에 쿼리 커서를 "재작성"할 수 있는 옵션이 있습니까?

감사합니다!

javascript 개체가 수정되는 것을 방지할 수 있습니다.Object.freeze(obj).

그래서 당신의 경우엔,const cursor = Object.freeze(query.docs[query.docs.length - 1])

언급URL : https://stackoverflow.com/questions/53243866/proper-way-to-handle-query-cursor-in-google-firestore-vue-nuxt-js

반응형