Pagination??

[Schmell]

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

<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

Any help would be greatly appreciated.

[sacrosanctic]

i think ref in <Collection /> is not reactive.

Force <Collection /> to reload with {#key lastDoc}{/key}