基于游标分页时Apollo Client调用fetchMore获取上一页如何移除first变量

Apollo Client 的 fetchMore 方法默认会将新传入的查询变量与 useQuery 初始化时定义的变量做浅合并，你没有主动修改的 first、after 参数会被默认保留，最终导致请求同时携带 first 和 last 两个互斥参数，触发接口返回无效结果。

• 方案1：显式覆盖不需要的变量
  调用 fetchMore 获取上一页时，主动将不需要的 first、after 参数设置为 null 即可，代码示例如下：

  await fetchMore({
    variables: {
      before: pageInfo.startCursor,
      last: 12,
      // 显式清空初始化时的分页参数
      first: null,
      after: null
    }
  });
  

  如果你使用的 GraphQL Schema 不允许 first/last 参数传 null，请使用方案2。

• 方案2：开启变量全量覆盖模式
  Apollo Client 3.0及以上版本的 fetchMore 支持 overwrite 配置项，设置为 true 后会完全使用你本次传入的查询变量，不再合并初始化时的变量：

  await fetchMore({
    variables: {
      before: pageInfo.startCursor,
      last: 12
    },
    overwrite: true
  });
  

完成分页请求后需要配置 updateQuery 方法合并新旧分页数据，否则前端商品列表不会自动展示加载到的上一页内容，基础配置示例如下：

const { loading, error, data, fetchMore, networkStatus } = useQuery(PRODUCTS,{
  variables: { first: 12, after: null },
  notifyOnNetworkStatusChange: true,
  updateQuery: (prevData, { fetchMoreResult }) => {
    if (!fetchMoreResult) return prevData;
    // 上一页加载完成后将新数据拼到列表头部，下一页则拼到尾部
    return {
      products: {
        ...fetchMoreResult.products,
        edges: [...fetchMoreResult.products.edges, ...prevData.products.edges]
      }
    }
  }
});

内容的提问来源于stack exchange，提问作者Bon Andre Opina