元素删除致游标失效时，如何实现Apollo GraphQL游标分页？

一、关于游标有效性的观察验证 #

你测试发现的「游标与元素一一映射，删除倒数第二个元素时游标仍有效、删除最后一个元素时游标失效」的现象是完全可靠的。这类游标属于基于元素实体的游标（通常用元素ID作为游标值），其核心逻辑是通过游标指向的元素定位下一页的起始位置：如果游标对应的元素存在，API能正常返回后续数据；如果该元素被删除，API失去锚点，自然返回游标无效。

二、Apollo生态下的解决方案 #

1. 缓存层面主动修正游标 #

当执行元素删除操作后，通过cache.modify直接更新缓存中分页查询的游标值，确保游标始终指向当前页最后一个存在的元素：

// 删除元素后，更新Person查询的缓存
cache.modify({
  fields: {
    Person(existingData, { readField }) {
      // 过滤掉已删除的元素
      const remainingItems = existingData.items.filter(item => item.id !== deletedItemId);
      // 重新设置游标：如果还有剩余元素，用最后一个的ID；否则设为null
      const updatedCursor = remainingItems.length ? remainingItems[remainingItems.length - 1].id : null;
      
      return {
        ...existingData,
        items: remainingItems,
        cursor: updatedCursor
      };
    }
  }
});

这样后续加载下一页时，会自动使用修正后的有效游标，避免失效问题。

2. 错误拦截与自动重试 #

如果API未做游标容错处理，可以在客户端通过Apollo的错误拦截器，捕获游标失效错误后自动重试：

const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  onError: ({ graphQLErrors, operation, forward }) => {
    // 假设API返回的游标失效错误信息为"INVALID_CURSOR"
    const isCursorInvalid = graphQLErrors?.some(err => err.message === 'INVALID_CURSOR');
    if (!isCursorInvalid) return;

    // 从缓存读取当前页的剩余元素，获取新的有效游标
    const currentPageData = client.readQuery({ 
      query: Person, 
      variables: operation.variables 
    });
    const newCursor = currentPageData.items.length 
      ? currentPageData.items[currentPageData.items.length - 1].id 
      : null;

    // 用修正后的游标重新发起查询
    return forward({
      ...operation,
      variables: { ...operation.variables, cursor: newCursor }
    });
  }
});

3. 改用非实体依赖型游标（后端支持前提下） #

如果后端可以调整，建议改用基于时间戳/序列值的游标（比如元素的创建时间、更新时间或全局递增序列ID）。这类游标不依赖元素的存在性，只要时间戳/序列值在合理范围内，API就能正确定位下一页起点，从根源上避免元素删除导致的游标失效问题。

三、无需全量获取的核心原则 #

所有方案的核心都是让游标始终指向一个有效的锚点：

• 要么在缓存层面主动维护游标有效性，删除元素后及时更新
• 要么在API层面增加容错逻辑，当游标指向的元素不存在时，自动定位到最近的有效元素
• 要么切换到不依赖实体存在的游标类型

内容的提问来源于stack exchange，提问作者dumbPotato21