Intended outcome: We did a pagination implementation, following the apollo docs (https://www.apollographql.com/docs/react/pagination/offset-based/). Using a read/merge function We expect that the read function is called with the new variables, once we call the fetchMore function and update the variables manually.
Actual outcome: We do not manage to get the pagination working, the data is fetched correctly but is not displayed properly. The bad display is caused by the variables that are not updated. The "read" function always receives the variables of the original query.
useEffect(() => {
if (isDefined(fetchMore)) {
fetchMore({
variables: {
offset:
currentPage === 1
? (currentPage - 1) * total
: (currentPage - 1) * total + 1,
first: total,
searchString: searchString
}
})
} else {
getData({
variables: {
offset: 0,
first: total,
searchString: searchString
}
})
} }, [currentPage, fetchMore, searchString, getData])
We have also tried to manually update our variables, since we do not use useQuery, but instead useLazyQuery.
client
.watchQuery({
query: GET_REPORTS,
variables: {
offset: 0,
first: total,
searchString: searchString
}
})
.setVariables({
offset:
currentPage === 1
? (currentPage - 1) * total
: (currentPage - 1) * total + 1,
first: 25,
searchString
})
Our typePolicy:
typePolicies: {
Query: {
fields: {
REPORT: {
keyArgs: false,
read(existing, {args}) {
**//here we would expect for our args to change, the moment we try fetch our
//second page**
return existing && existing.slice(args.offset, args.offset + args.first)
},
// The keyArgs list and merge function are the same as above.
merge(existing, incoming, { args: { offset = 0 } }) {
const merged = existing ? existing.slice(0) : []
for (let i = 0; i < incoming.length; ++i) {
merged[offset + i] = incoming[i]
}
return merged
}
}
}
}
}