Tips for obtaining the final document in a VueFire query

Question

Tips for obtaining the final document in a VueFire query

Struggling to figure this out as I am not a JavaScript expert. 😢

I'm utilizing Firestore as the database and VuexFire to link the data to VueX state, like this.

 getLeads: firestoreAction(async ({
        bindFirestoreRef
    }) => {
        // return the promise returned by `bindFirestoreRef`
        return bindFirestoreRef('leads', db.collection('leads').orderBy('updated.date', 'desc').limit(30))
    }),

The initial 30 results are fetched, and now I want to add an infinite scroll feature that triggers a function when the scroll reaches the bottom to fetch more data and link it to the same state. Pagination in Firestore requires passing a query cursor for the last fetched document as a reference

Referencing Firebase documentation with vanilla JS:

var first = db.collection("cities")
        .orderBy("population")
        .limit(25);

return first.get().then(function (documentSnapshots) {
  // Get the last visible document
  var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
  console.log("last", lastVisible);

  // Construct a new query starting at this document,
  // get the next 25 cities.
  var next = db.collection("cities")
          .orderBy("population")
          .startAfter(lastVisible)
          .limit(25);
});

As I am using VuexFire to bind the data to the state, I am struggling to find a way to retrieve the snapshot of the last document fetched by VuexFire (like lastVisible in the code above) so that I can pass it to the next query.

Any assistance would be greatly appreciated. 🙏🏽

javascript firebase vue.js google-cloud-firestore vuefire

Answer 1

Answer №1

In this scenario, imagine I possess a dataset of Customer records and am showcasing the initial 5 entries arranged by the most recent update.

Here's the code snippet:

getCustomers: firestoreAction(({ commit, bindFirestoreRef
}) => {
    bindFirestoreRef('Customers', db.collection('customers')
   .orderBy('updated.date', 'desc').limit(5)).then(documents => {
        commit('POPULATE_TESTCUSTOMERS', documents);
        commit('LAST_DOC', documents[documents.length - 1]);
    });

}),

I'm keeping track of both the fetched data and the last document in the state, iterating through and displaying the names as follows:

Nakheel
Emaar Group
Yapi Kredi Inc
Cairo Amman Bank
Arab Jordan Investment Bank LLC

Later on, I make another call using the last document as the query cursor, anticipating the next set of 5 documents to be retrieved from Firebase, like this:

fetchMoreCustomers: firestoreAction(({ state, bindFirestoreRef
}) => {
    bindFirestoreRef('testCustomers', db.collection('customers')
    .orderBy('updated.date', 'desc')
   .startAfter(state.lastDoc).limit(5))
}),

However, instead of receiving new results, I continue to get the same initial 5 entries from Firestore. What could be the issue here? :(

Answer 2

In this scenario, imagine I possess a dataset of Customer records and am showcasing the initial 5 entries arranged by the most recent update.

Here's the code snippet:

getCustomers: firestoreAction(({ commit, bindFirestoreRef
}) => {
    bindFirestoreRef('Customers', db.collection('customers')
   .orderBy('updated.date', 'desc').limit(5)).then(documents => {
        commit('POPULATE_TESTCUSTOMERS', documents);
        commit('LAST_DOC', documents[documents.length - 1]);
    });

}),

I'm keeping track of both the fetched data and the last document in the state, iterating through and displaying the names as follows:

Nakheel
Emaar Group
Yapi Kredi Inc
Cairo Amman Bank
Arab Jordan Investment Bank LLC

Later on, I make another call using the last document as the query cursor, anticipating the next set of 5 documents to be retrieved from Firebase, like this:

fetchMoreCustomers: firestoreAction(({ state, bindFirestoreRef
}) => {
    bindFirestoreRef('testCustomers', db.collection('customers')
    .orderBy('updated.date', 'desc')
   .startAfter(state.lastDoc).limit(5))
}),

However, instead of receiving new results, I continue to get the same initial 5 entries from Firestore. What could be the issue here? :(

Answer 3

Answer №2

VueFire and VuexFire internally utilize a serializer function to transform each Document obtained from RTDB or Firestore into the data objects that are linked to the final component or Vuex store state.

The default serializer is provided by the function createSnapshot, which belongs to the vuefire-core library:

/**
 * @param {firebase.firestore.DocumentSnapshot} doc
 * @return {DocumentData}
 */
export function createSnapshot (doc) {
  // sets id as a property of the data object
  return Object.defineProperty(doc.data(), 'id', {
    value: doc.id
  })
}

The default behavior only returns doc.data() with the addition of the id, discarding the original doc object. However, when implementing Firestore pagination using query.startAfter(doc), it becomes necessary to retain the original doc object. The good news is that VueFire and VuexFire offer the flexibility to replace the default serializer with a customized one that preserves the entire doc object like this:

const serialize = (doc: firestore.DocumentSnapshot) => {
  const data = doc.data();
  Object.defineProperty(data, 'id', { value: doc.id });
  Object.defineProperty(data, '_doc', { value: doc });
  return data;
}

We have the option to configure our custom VuexFire serializer either globally through plugin options or on a per-binding basis via binding options.

// Global setup Vue.use(firestorePlugin, { serialize });

// Or for individual binding bindFirebaseRef('todos', db.ref('todos'), { serialize } )

Now with VuexFire, we can access the initial document as state.todos[0]._doc or the last document as

state.todos[state.todos.length-1]._doc

to facilitate pagination queries for collections or "get next" & "get previous" queries that involve single documents (especially relevant when dealing with multi-field sorting in your base query).

Please take note: Since _doc and id are non-enumerable properties, they will not be visible on component or store objects within Vue DevTools.

Answer 4

VueFire and VuexFire internally utilize a serializer function to transform each Document obtained from RTDB or Firestore into the data objects that are linked to the final component or Vuex store state.

The default serializer is provided by the function createSnapshot, which belongs to the vuefire-core library:

/**
 * @param {firebase.firestore.DocumentSnapshot} doc
 * @return {DocumentData}
 */
export function createSnapshot (doc) {
  // sets id as a property of the data object
  return Object.defineProperty(doc.data(), 'id', {
    value: doc.id
  })
}

The default behavior only returns doc.data() with the addition of the id, discarding the original doc object. However, when implementing Firestore pagination using query.startAfter(doc), it becomes necessary to retain the original doc object. The good news is that VueFire and VuexFire offer the flexibility to replace the default serializer with a customized one that preserves the entire doc object like this:

const serialize = (doc: firestore.DocumentSnapshot) => {
  const data = doc.data();
  Object.defineProperty(data, 'id', { value: doc.id });
  Object.defineProperty(data, '_doc', { value: doc });
  return data;
}

We have the option to configure our custom VuexFire serializer either globally through plugin options or on a per-binding basis via binding options.

// Global setup Vue.use(firestorePlugin, { serialize });

// Or for individual binding bindFirebaseRef('todos', db.ref('todos'), { serialize } )

Now with VuexFire, we can access the initial document as state.todos[0]._doc or the last document as

state.todos[state.todos.length-1]._doc

to facilitate pagination queries for collections or "get next" & "get previous" queries that involve single documents (especially relevant when dealing with multi-field sorting in your base query).

Please take note: Since _doc and id are non-enumerable properties, they will not be visible on component or store objects within Vue DevTools.

Answer 5

Answer №3

According to the information provided in the VueFire documentation regarding data binding and its usage, when using the $bind method (which I assume is similar to your bindFirestoreRef), a promise is returned along with the result (while also binding it to this). As stated in the documentation:

this.$bind('documents', documents.where('creator', '==', this.id)).then(documents => {
  // The 'documents' variable will refer to the same property defined in data:
  // this.documents === documents
})

Hence, you should be able to follow the same approach and retrieve the document from the array by using something like this:

bindFirestoreRef('leads', db.collection('leads').orderBy('updated.date', 'desc').limit(30)).then(documents => {
  this.lastDoc = documents[documents.length - 1];
})

Answer 6

According to the information provided in the VueFire documentation regarding data binding and its usage, when using the $bind method (which I assume is similar to your bindFirestoreRef), a promise is returned along with the result (while also binding it to this). As stated in the documentation:

this.$bind('documents', documents.where('creator', '==', this.id)).then(documents => {
  // The 'documents' variable will refer to the same property defined in data:
  // this.documents === documents
})

Hence, you should be able to follow the same approach and retrieve the document from the array by using something like this:

bindFirestoreRef('leads', db.collection('leads').orderBy('updated.date', 'desc').limit(30)).then(documents => {
  this.lastDoc = documents[documents.length - 1];
})

Tips for obtaining the final document in a VueFire query

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to generate unique mousedown callbacks on the fly?

What methods does Enzyme have for determining the visibility of components?

Why is it that methods lose their binding when they are returned from a ternary operator?

Utilize the npm module directly in your codebase

Combining objects in JavaScript

Having a problem with the glitch effect in Javascript - the text is oversized. Any tips on how to resize

Using JavaScript to fetch elements by their ID along with a button

Disrupting a Program Operation

Ways to retrieve class attributes in a child context

Having trouble encoding PHP array in jQuery

Utilizing Laravel to Retrieve Information from an API

Vue ChartJS - Doughnut Chart with customized label in the center

I am looking to show images based on the number chosen from the dropdown menu in CodeIgniter

bind a class property dynamically in real-time

Error message occurs when creating a pie chart with invalid values for the <path> element in Plottable/D3.js

In search of a way to implement a conditional class binding within the current project

Even with manual installation, the npm package still encounters dependency errors

Exploring AngularJS: Understanding the Differences Between $http's Success and Then

Verification of email address is required, emails must be unique and not duplicated

Error message consistently pops up when using the jQuery search feature