在自定义合并函数中添加一个标志来指示分页逻辑。如果存在分页标志,则只对没有相应标志的数据进行合并。
例如,假设我们有一个返回用户列表的GraphQL查询,并且我们希望使用自定义合并函数来缓存此查询。以下是合并函数的示例代码:
const mergeUsers = (existing, incoming, { args }) => {
const { after } = args
const isCursorBasedPage = !!after // 判断是否存在 `after` 参数
if (isCursorBasedPage) {
// 如果是基于游标的分页,则只合并完全不同的列表
const existingIds = existing ? existing.map((user) => user.id) : []
const incomingIds = incoming.map((user) => user.id)
const newUsers = incoming.filter((user) => !existingIds.includes(user.id))
const merged = [...existing, ...newUsers]
return merged
}
// 否则就是简单的替换整个列表
return incoming
}
在这个函数中,我们检查是否传递了 after
参数,如果是,则标志为游标分页。然后,我们检查现有列表和新列表之间是否有任何重叠,如果没有,则将它们合并。
然后,在TypePolicy中使用此合并函数,并将分页标志传递给它:
const cache = new InMemoryCache({
typePolicies: {
Query: {
fields: {
users: {
keyArgs: false,
merge(existing, incoming, { args }) {
const { after } = args
const isCursorBasedPage = !!after
if (isCursorBasedPage) {
const existingIds = existing ? existing.map((user) => user.id) : []
const incomingIds = incoming.map((user) => user.id)
const newUsers = incoming.filter((user) => !existingIds.includes(user.id))
const merged = [...existing, ...newUsers]