预期结果: 我们按照 apollo 文档 (https://www.apollographql.com/docs/react/pagination/offset-based/) 进行了分页实现。使用读取/合并功能 我们期望一旦我们调用 fetchMore 函数并手动更新变量,就会使用新变量调用 read 函数。
实际结果: 我们无法使分页正常工作,数据已正确获取但未正确显示。不良显示是由未更新的变量引起的。 “读取”函数始终接收原始查询的变量。
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])
我们也尝试手动更新我们的变量,因为我们没有使用 useQuery,而是使用了 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
})
我们的类型政策:
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
}
}
}
}
}