【问题标题】:RN Apollo Client 3.0 - handle refetch with merge functionRN Apollo Client 3.0 - 使用合并功能处理重新获取
【发布时间】:2020-11-16 09:35:08
【问题描述】:

我最近正在从 2.0 迁移到 apollo 客户端 3.0。

我有一个查询需要获取更多和分页。

通过做,

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        getData: {
          // Handles incoming data
          keyArgs: [],
          merge(existing ={/*some default object fields*/}, incoming) {
            return {
              ...existing,
              pageInfo: incoming.pageInfo,
              edges: [...existing.edges, ...incoming.edges],
            };
          },
        },
      },
    },
  },
});

我能够处理初始查询/获取和分页。 但是,我在如何处理重新获取方面遇到了麻烦。 使用此合并功能,重新获取的数据只需与现有缓存数据连接。 我无法找到如何在合并功能中正确处理此问题。

如果有人知道如何处理,请告诉我。

【问题讨论】:

  • 我也有同样的问题。对我来说似乎是一个错误。为什么我必须担心在这种情况下合并? refetchQueries() 不应该删除旧的缓存值吗?
  • 是的,我认为这是这种新结构的错误或缺点。但是 3.0 是上个月发布的,所以我相信会有更多的事情发生。据我所知,Apollo 非常擅长管理文档、博客(apollo blogs)和特性。

标签: react-apollo apollo-client


【解决方案1】:

我可以通过观察 args 来解决问题。

const cache = new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            getData: {
              // Handles incoming data
              keyArgs: [],
              merge(existing ={/*some default object fields*/}, incoming, {args}) {
                if(args && !args.after){
                    // Initial fetch or refetch
                    return incoming;
                }
                
                // Pagination
                return {
                  ...existing,
                  pageInfo: incoming.pageInfo,
                  edges: [...existing.edges, ...incoming.edges],
                };
              },
            },
          },
        },
      },
    });

【讨论】:

  • 我面临同样的问题。这似乎可行,但args.after 是什么?文档链接会很有帮助!
  • 嗯,没有文件。我不知道您正在使用哪种 API。但我的团队使用 GraphQl。在 GraphQl 分页中,基于 facebook 的规范,有一个名为 pageInfo 的对象,由端点提供给客户端。在那里,通常有 hasNextPage 和 endCursor。 args 代表参数,args.after 是 endCursor 与查询一起传递给 API。举一个简单的例子,你有一个最初显示 10 个项目的列表视图。当用户到达列表末尾时,您想要获取更多。当时,你传递了之前提供的endCursor,这里是之后的。
  • 举个更具体的例子,假设我们有“query getSomeItems(first:Int, after: Int)”。如果您不熟悉 GraphQl,请将此查询理解为客户端用于获取项目的 API。在此查询中,first 和 after 是与查询一起提供的参数。 first 表示您要获取多少项目。之后解释一下,想象一个包含项目列表的数据库。每个项目都有 id。最初,您希望从最近的项目开始,这样您就不会在之后提供。但是如果你想在第一次fetch之后继续获取更多,你必须提供after,也就是最后一个item的id
  • 所以总结一下在上面的代码中做了什么,我们可以用它来检查我们收到的项目是来自初始提取还是第 N 次提取。正如我上面解释的,初始提取没有之后,但提取更多或任何后续提取必须有之后。我们在 Apollo 3.0 上遇到的问题(或者至少我当时遇到的问题)是我很难区分 fetchMore、refetch 和 initial fetch。
  • @JunmingWang args 是您的查询变量。在此示例中,false 之后表示它是初始提取或重新提取,但它可能是另一个参数,例如 start === 0 或 nextToken,这完全取决于您对分页的特定查询。
猜你喜欢
  • 2020-11-08
  • 1970-01-01
  • 2021-10-06
  • 2021-04-04
  • 2021-09-01
  • 2017-09-24
  • 2020-03-17
  • 2018-09-18
  • 2019-12-25
相关资源
最近更新 更多