Does anyone know how to make pagination work with the Collection component?
I found this tutorial from fireship.io, but this is using an older version of sveltefire (and firebase). I would assume that it should still work in theory.
This is what i tried so far
<script lang="ts">
// ...imports etc..
let pageSize = 2;
let field = 'lastModified';
let path = 'events';
let lastDoc;
let collRef = collection(firestore, path);
const nextPage = (last) => {
lastDoc = last;
};
$: runQuery = () => {
let q = query(collRef);
q = query(q, orderBy(field));
if (lastDoc) {
q = query(q, startAfter(lastDoc.lastModified));
}
q = query(q, limit(pageSize));
console.log('runQuery: ', q);
return q;
};
</script>
<Collection ref={runQuery()} let:data>
<div slot="loading">Loading Events ...</div>
{#each data as item}
<p>{item.name}</p>
{/each}
<button on:click={() => nextPage(data[data.length - 1])}>MORE</button>
</Collection>
If I press the MORE button I know that the runQuery function runs again as I can see the console.log, but the page does not update with the next documents.
I did an experiment using just firestore and the query does work as expected
Again this is not an issue rather a question.
Does anyone know how to make pagination work with the Collection component?
I found this tutorial from fireship.io, but this is using an older version of sveltefire (and firebase). I would assume that it should still work in theory. This is what i tried so far
If I press the MORE button I know that the
runQuery
function runs again as I can see the console.log, but the page does not update with the next documents.I did an experiment using just firestore and the query does work as expected
Any help would be greatly appreciated.