Infinite Scroll Callback in Vuex

surekha

I am not able to call the ‘callback (done)’ in my vuex action.

The action is mapped this way to the component

<q-infinite-scroll :handler=“loadMore”>
</q-infinite-scroll>

loadMore: function(index, done) {

   this.$store.dispatch('myBackendRequest').then(response => {
      done() // This does not work. Keeps calling my request continuously.
   })
  .catch(function (error) {

  })

}

Vuex Store:

actions: {

 myBackendRequest({commit}, index, done) {

     console.log(index); //works well and counts for each request made
     console.log(done); //is always undefined 

   }
}

How do I call the done() callback, once I get the response back from the server?

n.taddei

I don’t use Vuex, but I think I get your problem.
The done() function won’t prevent Inifinite Scroll from performing another request when the scroll it’s at the end of its run.
That because an Infinite Scroll do not forecast an end for the data loaded.
I found a solution using stopScroll() function when I have no more data to fetch from the server.

iodoli

I have this code in vuex sotre actions and there is a problem with a reference to the last queried item. I’m viewing console results, and my loop goes all the time from the beginning of items from the firestore firebase database.

itemsInfinity({ commit, getters }, index, done) {
    //get value of the last queried Item from state
    let lastItem = getters.getLastQItem;
    let startAtLastQ = lastItem ? lastItem : null;

    let tasksRef = fireStoreDb
      .collection('users')
      .doc(userId)
      .collection('tours')
      .orderBy('tourStartPrice', 'desc')
      .startAt(startAtLastQ)
      .limit(5);

    tasksRef
      .get()
      .then(function(querySnapshot) {
        // Get the last visible document and save to state
        let lastQItem = querySnapshot.docs[querySnapshot.docs.length - 1];     
        commit('setLastQItem', lastQItem);
       
        // save items to the state
        querySnapshot.forEach(function(doc) {
          commit('addItem', {
            id: doc.id,
            item: doc.data()
          });
        });
      })
      .catch(function(error) {
        console.log('Error getting items: ', error);
      });

  },

I found that lastQItem, gave me an error:

Error getting documents:  TypeError: Converting circular structure to JSON

So I googled and found a technique. I replaced circular links and I thought it will solve my issue, this was added to code and commit setLastQItem started to go well, the value of the last queried item-1 stored successfully, but Im still getting data starting from the first item from firestore db

import * as util from 'util'; // has no default export
import { inspect } from 'util'; // or directly
...
let lastQItemCircular = util.inspect(lastQItem);
commit('setLastQItem', lastQItemCircular);

Unfortunately after googling and trying so many things I’m stuck at this point. Guys, what is wrong with my code and/or approach?

iodoli

@iodoli The query starts from the beginning all the time and not from the saved last visited query cursor. any idea appreciated!)

No More Posting New Topics!

Infinite Scroll Callback in Vuex