I am currently developing a pagination feature that loads more data based on category type. However, I have encountered an issue:
endBefore: Starting point was already set (by another call to endAt, endBefore or equalTo).
I understand that I can't use endBefore and equalTo together, but I am struggling to find a solution. If anyone has a workaround for this, I would greatly appreciate it. Here is the code snippet I have:
function getPost() {
const vibesQuery = query(
vibesRef,
orderByChild("category"),
equalTo(categoryType),
limitToLast(2)
);
onValue(vibesQuery, (snapshot) => {
const data = snapshot.val();
if (data) {
const vibesArray = Object.values(data);
setVibes(vibesArray.reverse());
setLastVibe(vibesArray[vibesArray.length - 1][sortingType]);
}
});
function getMorePosts() {
const vibesQuery = query(
vibesRef,
orderByChild("category"),
equalTo(categoryType),
endBefore(lastVibe),
limitToLast(2)
);
onValue(vibesQuery, (snapshot) => {
const data = snapshot.val();
if (data) {
const vibesArray = Object.values(data);
setVibes([...vibes, ...vibesArray.reverse()]);
setLastVibe(vibesArray[vibesArray.length - 1][sortingType]);
}
setIsMoreLoading(false);
});
}
Here is the structure of my data:
{
"-LbzPjzin65Rt3ZIK1Lo": {
"caption": "Great",
"category": "OUTDOORS",
"cityVibe": "Chino",
"stateVibe": "CA",
"creationDate": 1573942298.999069,
"fullname": "Bryant",
},
...
}
If you have any additional insights or suggestions, please feel free to share. Thank you for the assistance!