javascript - 了解 AWS AppSync JavaScript SDK 中的 Apollo 客户端缓存和乐观 UI

Question

我正在尝试使用 AWS AppSync JavaScript SDK 在 Apollo 客户端中实现缓存，但我很难首先理解使用缓存的最佳方法，其次我需要进行哪些更改以适应 Apollo V2 教程以使用 AppSync开发工具包。

关于使用缓存，我有一个我得到的对象列表，然后我想查看和修改这个列表中的单个对象。有很多关于如何更新列表中的内容的教程，但我宁愿运行第二个查询，通过其 ID 获取单个对象，以便页面始终可以工作，而不必先通过列表。

缓存是否足够智能以知道通过查询 Y 和 Z 获得的对象 X 是同一个对象并且将同时更新？如果没有，是否有任何关于如何编写更新的文档，该更新将同时更新列表中的对象？

如果没有文档存在，那么我会尝试自己解决并发布代码(因为它很可能不起作用)。

关于第二个问题，我已经让应用程序工作并使用 Amplify 查询 API 进行身份验证，但我不确定如何正确实现缓存。创建客户端时需要指定缓存还是SDK有内置缓存？如何访问缓存？是否只是像在这些教程中那样查询客户端？ https://www.apollographql.com/docs/react/advanced/caching.html

Answer 1

我先回答你的第二个问题:

With regards to the second question I have got the application working and querying the API using Amplify for authentication but I am unsure as to how to correctly implement the cache. Do I need to specify the cache when creating the client or does the SDK have a built-in cache? How do I access the cache? Is it just by querying the client as in these tutorials?

好的。所以这里有点麻烦——看起来 AppSync 是在 GraphQL 的主要客户端库(Apollo、Relay 等)进行大修的时候部署的，所以 AWS 实际上创建了一个围绕 Apollo 客户端的包装器(可能是为了稳定的 API 目的)然后暴露自己的做事方式。只是快速浏览一下代码，看起来他们有自己的专有和未记录的做事方式 that involves websockets, their authentication protocols, a redux store, offline functionality, ssr, etc )。因此，如果没有明确解释here或 here ，您处于未知领域。

幸运的是，他们提供的所有东西(以及更多)现在都已在 中的底层 Apollo Client 中实现。记录在案 道路。更幸运的是，看起来 AppSync 客户端将大部分实际的 GraphQL 相关内容直接转发到内部 Apollo 缓存，并允许您在 cacheOptions 下传递配置选项。 ，因此您可以使用 Apollo Client 进行的大多数配置都可以使用 AppSync 客户端进行(更多信息见下文)。

不幸的是，您无法使用 AppSync 客户端直接访问缓存(他们隐藏了它以确保他们的公共(public) API 在波动的生态系统中保持稳定)。但是，如果您确实需要更多控制，他们在 AppSync 客户端中实现的大部分内容都可以轻松复制到您自己的 Apollo 客户端实例中，您可以在其中解锁完全控制(您可以使用 open-source AppSync code 作为基础)。由于 GraphQL 前端和后端是解耦的，因此您没有理由不能使用自己的 Apollo Client 来连接 AppSync 服务器(对于一个大型的、严肃的项目，这就是我会做的，因为 Apollo Client 有更好的文档记录)并正在积极开发中)。

Is the cache smart enough to know that object X got through queries Y and Z is the same object and will be updated at the same time? If not, is there any documentation on how to write an update that will update the object in the list and by itself at the same time?

第一部分涉及 Apollo 客户端和 AppSync 客户端。

是的!这是 Apollo 客户端的一大优点——每次您进行查询时，它都会尝试更新缓存。缓存是规范化的键值存储，其中所有对象都存储在顶层，键是 __typename 的组合。和 id对象的属性。 Apollo客户端会自动添加__typename到您的所有查询(尽管您必须手动将 id 添加到您的查询中 - 否则它会退回到查询路径本身作为键 [这不是很健壮])。

docs提供了一个非常好的机制概述。

现在，您可能需要做一些更高级的事情。例如，如果您的 GraphQL 架构使用除 id 之外的某个唯一对象标识符。 ，您必须为 dataIdFromObject 提供一些功能映射到它。

此外，有时在进行查询时，缓存很难在发出网络请求之前准确知道您要求检查缓存的内容。为了缓解这个问题，他们提供了 cache redirect机制。

最后，也许是最复杂的，是如何更新分页查询中的内容顺序(例如，有序列表中的任何内容)。为此，您必须使用 @connection指示。由于这是基于 relay connection spec ，我建议略读一下。

奖励:要查看缓存的运行情况，我建议使用 Apollo client dev tools .这是一个小问题，但它至少可以让您深入了解本地缓存实际发生的情况——如果使用 AppSync，这将不起作用。

因此，除了以上所有关于设置和配置缓存的信息之外，您还可以在应用程序运行时控制数据和对缓存的访问(如果直接使用 Apollo Client 而不是 AppSyncClient)。

Direct Cache Access docs指定可用的方法。但是，由于大多数更新仅根据您所做的查询自动发生，因此您不必经常使用这些更新。但是，它们的一种用途是用于复杂的 UI 更新。例如，如果您进行更改以从列表中删除项目，而不是重新查询整个列表(这将更新缓存，但以更多网络数据、解析和规范化为代价)，您可以定义自定义缓存使用 readQuery 更新/writeQuery和 update突变选项。这也很适合 optimisticResponse如果您正在寻找乐观的 UI，您应该使用它。

此外，您可以使用 fetchPolicy or errorPolicy options 之一来选择是要使用还是绕过缓存(或一些更高级的策略)。 .