ReactNativeFirebase issues with BATCH querying of arrays - reactjs

Question

i thank you all for being there for all who have issues with codes.. i have an issue too, and at this point, i've ran out of ideas, i've read through blogs and followed gists i possibly can, regarding this, but none worked for me...
THE PROBLEM:
i'm working on pagination in my app, which was working fine earlier, until i added a feature (ability to let users add posts they don't want to see to thier blacklist fields, these posts won't be shown to them). Now, they've blacklisted more than 10 ids, (let's say 15 ids).
due to firestore query limitations while using the (not-in, in, etc), if the array you are filtering from is more than 10 values, you'll have to run a batch request, probably in a loop, which goes with 10 values in an array at a time, after u must have split the arrays in chunks.
Now, the thing is, on the first iteration, i'm successfully getting my desired posts, also i'm storing the lastQuerySnapshot so i can use it on the second iteration, THIS IS WHERE THE ISSUE IS, for some reasons, i still get the posts whose ids are contained in the 2nd iteration, i've logged as many as possible, but couldn't trace successfully, i noticed probably this might be an issue with startAfter(doc) from Rnfirebase, but i'm not sure.
i'll be really happy if you help me on this, i've been on this for weeks now. here's my codes
export const getFilteredPosts = async (
postsBlacklisted,
lastItem,
limit = 10,
) => {
try {
// const baseUrl = firestore().collectionGroup('AllPosts').orderBy('postedOn');
// const baseUrl = firestore().collectionGroup('AllPosts').orderBy('postID');
const baseUrl = firestore()
.collection('AllPosts')
.orderBy('postID', 'desc');
const postCondition = lastItem ? baseUrl.startAfter(lastItem) : baseUrl;
if (!postsBlacklisted.length > 0) {
console.log('FETCHING WITHOUT FILTER, NO BLACKLISTS ', postsBlacklisted);
//just get all random post.
let response = await postCondition.limit(limit).get();
if (response) {
const lastVisibleItem = response.docs[response.docs.length - 1];
let results = response.docs.map(result => ({
id: result.id,
...result.data(),
}));
return {postsArray: results, lastVisibleItem: lastVisibleItem};
} else {
console.log('check ur filterOutBlackList method');
}
} else {
console.log(' posts black list passed!!!', postsBlacklisted);
}
if (postsBlacklisted || postsBlacklisted.length > 0) {
console.log('FETCHING with FILTER, see BLACKLISTS ', postsBlacklisted);
var copiedPostsBlacklisted = [...postsBlacklisted];
var batches = [];
var index = 0;
var batchChunks = [...splitArrayInChunks(copiedPostsBlacklisted, 10)];
var lastQueryResult;
while (index < batchChunks.length) {
if (lastQueryResult) {
const results = await postCondition
.where('postID', 'not-in', batchChunks[index])
.startAfter(lastQueryResult)
.limit(10)
.get();
if (results) {
batches.push(results.docs);
}
} else {
const results = await postCondition
.where('postID', 'not-in', batchChunks[index])
.limit(10)
.get();
if (results) {
lastQueryResult = results.docs[results.docs.length - 1];
batches.push(results.docs);
}
}
index++;
}
var allPosts = batches.flat().map(result => ({
id: result.id,
...result.data(),
}));
return {
lastVisibleItem: lastQueryResult,
postsArray: allPosts,
};
}
} catch (error) {
console.log('FATAL ERROR ', error.message);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
**the function that splits the array is : **
//this function returns a splitted array in chunks of 10, if the array passed has more than 10 values
export function* splitArrayInChunks(arr, n) {
for (let i = 0; i < arr.length; i += n) {
yield arr.slice(i, i + n);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
**the way i'm calling this getFilteredPosts **
const querySnapshot = await getFilteredPosts(
blackListedPosts,
afterDoc,
limit,
);
//initially, the "afterDoc" is null, becuz it's the first time i'm calling this function, i've disabled the load more functionality to enable me focus on debugging where the blacklist wierd issue is comming from. the "blackListedPosts" is soomething like this = [i hold more than 10 posts ids], the "limit" is exactly 10
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
here's my package.json, a few dependences
"#react-native-firebase/app": "^14.7.0",
"#react-native-firebase/auth": "^14.7.0",
"#react-native-firebase/firestore": "^14.7.0",
"#react-native-firebase/storage": "^14.7.0",
"react": "17.0.2",
"react-native": "0.67.3",