Firestore .startAt не работает должным образом

Question

infiniteHandler($state) {
    var next = db
        .collection("posts")
        .orderBy("timestamp", "desc")
        .startAfter(this.lastVisible)
        .limit(3)

    next.get().then(documentSnapshots => {
        //Get the last visible document
        // this.lastVisible =
        // documentSnapshots.docs[documentSnapshots.docs.length - 1]

        if (documentSnapshots.docs.length == 0) $state.complete()
        else {
            this.$store.commit(
                "modules/posts/updateLastVisible",
                documentSnapshots.docs[documentSnapshots.docs.length - 1].data()
                .timestamp
            )
        }

        documentSnapshots.forEach(doc => {
            var post = doc.data()
            post.docID = doc.id
            this.$store.commit("modules/posts/pushPost", post)
        })
        $state.loaded()
    })
}

Это мой бесконечный загрузчик, который извлекает новые записи в БД, как только достигнут конец списка.Работает нормально до сих пор.

Это мой первый выбор, когда страница загружается

async fetch({ store }){
    if (store.state.modules.posts.posts.length < 5) {
        let posts = []
        await db
            .collection("posts")
            .orderBy("timestamp", "desc")
            .limit(3)
            .get()
            .then(querySnapshot => {
                store.commit(
                    "modules/posts/updateLastVisible",
                    querySnapshot.docs[2].data().timestamp
                )
                querySnapshot.forEach(doc => {
                    var x = doc.data()
                    x.docID = doc.id
                    posts.push(x)
                })
            })
        store.commit("modules/posts/fetchedPosts", posts)
    }
}

В основном проблема заключается в том, что я получаю первые 3 записи, которые я получаю на странице загрузки снова, когда я получаю в моемОбработчик бесконечной загрузки, который приводит к тому, что записи отображаются дважды, этого не должно происходить, потому что this.lastVisible имеет метку времени 3-го элемента, которую я выбираю при загрузке, поэтому их следует игнорировать.

После этих элементов всеработает нормально с .startAfter, но первые 3 загружаются снова не имеет смысла.Я проверил магазин с помощью devtools, и все работает нормально, this.lastVisible имеет правильное значение при первом вызове обработчика infiniteLoading.

Bounty Edit: Хорошо, у меня все еще есть проблема, которую я пытался воспроизвестинемного больше, чтобы найти проблему, но она все еще происходит ... Сейчас я назначу награду, и я надеюсь, что любой сможет помочь.

Answer 1

Если вы хотите игнорировать первые 3 сообщения в infiniteHandler, вы можете создать один массив сообщений, в котором вы храните идентификатор сообщения и проверяете, загружен или нет идентификатор сообщения.Я знаю, что это должно быть решено с помощью запроса, но как временное решение, я надеюсь, что оно будет работать для вас.

infiniteHandler($state) {
    var next = db
        .collection("posts")
        .orderBy("timestamp", "desc")
        .startAfter(this.lastVisible)
        .limit(3)

    next.get().then(documentSnapshots => {
        //Get the last visible document
        // this.lastVisible =
        // documentSnapshots.docs[documentSnapshots.docs.length - 1]

        if (documentSnapshots.docs.length == 0) $state.complete()
        else {
            this.$store.commit(
                "modules/posts/updateLastVisible",
                documentSnapshots.docs[documentSnapshots.docs.length - 1].data()
                .timestamp
            )
        }

        documentSnapshots.forEach(doc => {
            var check = this.postIdArray.indexOf(doc.id);
            if(check == -1){
                var post = doc.data()
                post.docID = doc.id
                this.$store.commit("modules/posts/pushPost", post);
                this.postIdArray[] = doc.id;
            }
        })
        $state.loaded()
    })
}



async fetch({ store }){
    this.postIdArray = [];
    if (store.state.modules.posts.posts.length < 5) {
        let posts = []
        await db
            .collection("posts")
            .orderBy("timestamp", "desc")
            .limit(3)
            .get()
            .then(querySnapshot => {
                store.commit(
                    "modules/posts/updateLastVisible",
                    querySnapshot.docs[2].data().timestamp
                )
                querySnapshot.forEach(doc => {
                    var x = doc.data()
                    x.docID = doc.id
                    this.postIdArray[] = doc.id;
                    posts.push(x)
                })
            })
        store.commit("modules/posts/fetchedPosts", posts)
    }
}

Answer 2

Хорошо, поэтому я нашел временное решение, которое пока работает, но все еще не очень красиво:

documentSnapshots.forEach(doc => {
          if (
            doc.id !== this.posts[0].docID &&
            doc.id !== this.posts[1].docID &&
            doc.id !== this.posts[2].docID
          ) {
            var post = doc.data()
            post.docID = doc.id
            this.$store.commit("modules/posts/pushPost", post)
          }
        })

Я также пытаюсь сделать это более эффективным с помощью различных решений, спасибо за вашу помощь.

Answer 3

На самом деле вам не нужно получать первый раз.InfiniteHandler будет вызван сам по себе, когда он будет смонтирован.Если он не вызывается, вы можете попробовать использовать функцию

this. $ Refs.infiniteLoading.attemptLoad ();// 'infiniteLoading' - это свойство ref компонента

, которое фактически вызовет для вас функцию infiniteHandler.

EDIT: проверить, запущена ли одна из функций в данный момент.На части обработчика

infiniteHandler($state) {
    //Check if its currently loading
    this.$nextTick(()=>{
       if (this.isDocSnapShotLoading){
           return;
       }
    });

    //set as currently loading
    this.isDocSnapShotLoading = true;

    var next = db
        .collection("posts")
        .orderBy("timestamp", "desc")
        .startAfter(this.lastVisible)
        .limit(3)

    next.get().then(documentSnapshots => {
        //Get the last visible document
        // this.lastVisible =
        // documentSnapshots.docs[documentSnapshots.docs.length - 1]

        if (documentSnapshots.docs.length == 0) $state.complete()
        else {
            this.$store.commit(
                "modules/posts/updateLastVisible",
                documentSnapshots.docs[documentSnapshots.docs.length - 1].data()
                .timestamp
            )
        }

        documentSnapshots.forEach(doc => {
            var post = doc.data()
            post.docID = doc.id
            this.$store.commit("modules/posts/pushPost", post)
        })
        $state.loaded()

        //set completed loading
        this.isDocSnapShotLoading = false;
    })
}

На части выборки

async fetch({ store }){
    if (store.state.modules.posts.posts.length < 5) {

        //check if currently loading
        this.$nextTick(()=>{
           if (this.isDocSnapShotLoading){
              return;
           }
       });

        //set as currently loading
        this.isDocSnapShotLoading = true;

        let posts = []
        await db
            .collection("posts")
            .orderBy("timestamp", "desc")
            .limit(3)
            .get()
            .then(querySnapshot => {
                store.commit(
                    "modules/posts/updateLastVisible",
                    querySnapshot.docs[2].data().timestamp
                )
                querySnapshot.forEach(doc => {
                    var x = doc.data()
                    x.docID = doc.id
                    posts.push(x)
                })

                //set as completed loading.
                this.isDocSnapShotLoading = false;
            })
        store.commit("modules/posts/fetchedPosts", posts)
    }
}