如何用ApolloGraphQL保持派生状态最新？

Question

我的情况是这样的。我的视图中有多个组件，这些组件最终依赖于相同的数据，但在某些情况下，视图的状态是 派生 的数据。 当底层数据发生变化时，如何确保我的整个视图保持同步？ 我将用一个例子来说明，用大家最喜欢的 星球大战API.

首先，我显示一个所有电影的列表，查询方式如下。

# ALL_FILMS
query {
  allFilms {
    id
    title
    releaseDate
  }
}

接下来，我想在用户界面中加入一个单独的组件 来突出显示最近的电影。 没有查询，所以我将用一个客户端解析器来实现它。 查询的内容是："最近的电影"。

# MOST_RECENT_FILM
query {
  mostRecentFilm @client {
    id
    title
  }
}

然后是解析器

function mostRecentFilmResolver(parent, variables, context) {
    return context.client.query({ query: ALL_FILMS }).then(result => {
        // Omitting the implementation here since it's not relevant
        return deriveMostRecentFilm(result.data);
    })
}

现在，有趣的地方在于SWAPI加入了... 最后的绝地武士 和 天行者的崛起 到其电影列表。 我们可以假设我 投票 列表上，这样它就会定期被重新读取。 很好，现在我的列表UI是最新的。 但我的 "最近的电影 "UI并没有意识到任何变化--它仍然停留在2015年，显示的是 原力觉醒，即使用户可以清楚地看到有新的电影。

也许我被宠坏了，我来自于世界的 MobX 在那里，像这样的东西Just Works™。 但这并不觉得是一个罕见的问题。 在ApolloGraphQL领域有什么最佳实践来保持同步吗？ 我处理这个问题的方式是否完全错误？

我有几个想法。

• 我的 "最近的电影 "查询也可以周期性地进行投票。 但是你不希望轮询 太 常；毕竟，《星球大战》电影每隔一年左右才出一次。 (谢谢，迪斯尼!)而且根据投票间隔如何重叠，仍然会有一个很大的窗口，事情是不同步的。
• 而不是把 deriveMostRecentFilm 的逻辑，只要把它放在组件中，并共享该组件的 ALL_FILMS 组件之间的查询。 这样做是可行的，但这基本上是用 "不要使用Apollo "来回答 "如何让这个在Apollo中工作？"。
• 一些复杂的系统来跟踪查询之间的依赖关系，并在此基础上进行链式刷新。 (如果可以避免的话，我并不热衷于发明这个!)。

Answer 1

在Apollo中，观测值是（在组件中）在查询的值上（缓存的数据 "槽"），但你的 mostRecentFilm 不是一个可观察的值，不是基于缓存的值（它们是缓存的），而是基于一次性启动的查询结果（按需更新）。

你只是缺少一个 "更新连接"，比如这样。

# ALL_FILMS
query {
  allFilms {
    id
    title
    releaseDate
    isMostRecentFilm @client
  }
}

使用 "更新连接"，就像这样： isMostRecentFilm 本地解析器更新 mostRecentFilm 缓存中的值。

任何查询(useQuery)与 mostRecentFilm @client 会自动更新。全部无需额外的查询、投票等。- 只是工作？(未经测试，应该能用);)