[solved] Pagination with `fetchMore` - to me: do not change the initial variables

[bin16]

I was writing codes like Pagintion with fetchMore, and it works well before the last request.

this.$apollo.queries.bubblesPage.fetchMore({
    variables: { skip, count },
    updateQuery: (previousResult, { fetchMoreResult }) => {
        const newItems = fetchMoreResult.bubblesPage.bubbles

        console.info(previousResult, fetchMoreResult) // see the screenshot

        return {
            bubblesPage: {
                __typename: previousResult.bubblesPage.__typename,
                bubbles: [...previousResult.bubblesPage.bubbles, ...newItems],
                hasMore: true
            }
        }
    }
})

However, when the last request returns bubblesPage but with a bubbles: [], i see previousResult.bubblesPage.bubbles is [] too, not the previous values, as a result, all bubbles are gone.

I was keeping call fetchMore(), at the end, list of fetchMoreResult is [], because server returns that. But why the previousResult becomes [] too?

---

Oh, i see, new items are merged with result of the previous request.
So [req-1: 12 results] + [req-2: 12 results] ==> [new req-2: 24 results]
and [req-2: 12 results] + [req-3: 6 results] ==> [new req-3: 18 results]
and [req-3: 6 results] + [req-4] ==> [new req-4: 6 results]
at last [req-4: 0 results] + [req-5: 0 results] ==> []

But why the previous result is not all my items?

---

update again

apollo: {
    bubblesPage: {
        query: GET_BUBBLES_PAGE,
        variables () {
            const { skip, count } = this.u
            
            return { skip, count }
        }
    }
}

reason found: after i change the variables from function to { skip: 0, count: 12 }, it works now.

---

Thanks a lot!

[bin16]

apollo: {
    bubblesPage: {
        query: GET_BUBBLES_PAGE,
        variables: { // well
            skip: 0,
            count: 12
        },
        variables () { // well
            return {
                skip: 0,
                count: 12
            }
        },
        variables () { // broken
            const { skip, count } = this.u

            return {
                skip,
                count
            }
        }
    }
}

i tested the three types of variables, and the third one is broken with the problem, others are ok

btw, this is my full method to call fetchMore:

methods: {
    loadMore () {
        if (!this.bubblesPage.hasMore) {
            return
        }

        this.u.skip += this.u.count
        const { skip, count } = this.u
        this.$apollo.queries.bubblesPage.fetchMore({
            variables: { skip, count },
            updateQuery (previousResult, { fetchMoreResult }) {
                const newItems = fetchMoreResult.bubblesPage.bubbles

                return {
                    bubblesPage: {
                        __typename: previousResult.bubblesPage.__typename,
                        bubbles: [...previousResult.bubblesPage.bubbles, ...newItems],
                        hasMore: true
                    }
                }
            }
        })
    }
}

[bin16]

Well, i see, because variables keep changing, the Symbol(id): "$ROOT_QUERY.getBubblesPage({"count":12,"skip":0})" changes too!

[bin16]

Maybe we can add a warning message in the document 😂

[prem-prakash]

@bin16 how to work with a cursor in pagination if it comes in the query result?