caching - 寻求帮助了解 Apollo Client 本地状态和缓存

Question

我正在使用 Apollo Client 本地状态和缓存，虽然我已经阅读了文档 ( https://www.apollographql.com/docs/react/essentials/local-state )、一些教程(例如 https://www.robinwieruch.de/react-apollo-link-state-tutorial/ )并查看了一些示例，但我有点糊涂了。除了您可能能够针对以下具体问题提供的任何见解之外，我们将非常感谢您提供任何指向良好的附加文档/资源的链接以将内容放在上下文中。

特别是，我了解如何存储本地客户端数据并检索它，但我没有看到事情如何与从服务器检索并发送回服务器的数据集成。

以简单的“待办事项应用”为起点，我有几个问题。

1) 如果您使用查询从服务器下载一组数据(在本例中为“todos”)，缓存数据与服务器端数据之间的关系是什么？也就是说，我通过查询获取数据，它会自动存储在缓存中。现在，如果我想在本地获取该数据，并修改它(在这种情况下，添加待办事项或修改它)，我该怎么做？我知道如何为我创建的数据执行此操作，但不知道如何为我下载的数据执行此操作，例如，在本例中，我的待办事项集。例如，一些教程引用了 __typename —— 如果是从服务器下载的数据，这个 __typename 是什么？如果我使用 readQuery 来获取从服务器下载并存储在缓存中的数据，我会使用什么查询？和我原来用来下载数据的一样吗？

2) 一旦我修改了这个本地数据(例如，在 todos 的情况下，将一个 todo 设置为“已完成”)，并使用 writeData 将其写回缓存，如何它是否被发送回服务器，以便本地副本和远程副本同步？有突变？所以我负责将副本存储到本地缓存并通过两个单独的操作将其发送到服务器？

3) 据我了解，除非您另有说明，否则如果您从 Apollo Client 进行查询，它将首先检查您请求的数据是否在缓存中，否则它将调用服务器。那么，为什么需要在 example code 中创建一个 @client完成待办事项？因为这些不是通过先前查询从服务器下载的，而只是本地数据？

const GET_TODOS = gql`
  {
    todos @client {
      id
      completed
      text
    }
    visibilityFilter @client
  }
`;

如果它们实际上是通过较早的查询下载的，那么您不能只使用您最初用于从服务器获取数据的相同查询，而不是放置 @client，并且如果数据在缓存中，你会得到缓存的数据吗？

4) 最后，我读到 Apollo Client 将“自动”更新内容——也就是说，如果您将修改后的数据发送到服务器(比如，在我们的例子中，是修改后的待办事项)，Apollo Client 将确保一条数据在缓存中被修改，通过 ID 引用它。有什么规定什么时候可以什么时候不可以吗？如果 Apollo Client 使用 ID 与服务器保持同步，我们何时需要像上面那样“手动”处理它，何时不需要？

感谢您的任何见解，如果您有指向除上述文档以外的其他文档的链接，或者好的教程，我将不胜感激

Answer 1

1. __typename 是 Apollo 内置的自动魔术方式，用于跟踪和缓存查询结果。默认情况下，您可以使用项目的 __typename 和 id 在缓存中查找项目。在您需要手动调整缓存之前，您通常不需要担心 __typename。在大多数情况下，只需重新运行您的服务器查询以在原始请求之后从缓存中提取。服务器响应默认缓存，所以下次运行查询时，它会从缓存中提取。

2. 这取决于您的情况，但大多数情况下，如果您正确设置 ID，Apollo 客户端会自动同步来自突变的更改。您需要做的就是返回 id 属性和突变查询中任何更改的字段，Apollo 将自动神奇地更新缓存。因此，如果您要描述将待办事项标记为已完成的位置，您可能应该只将突变发送到服务器，然后在突变响应中请求完成的字段和 ID。客户端会自动更新。

3. 您可以使用原始查询。 Apollo 客户端本质上使用 query + variable -> results 映射来缓存内容。只要您提交具有相同变量的相同查询，它就会从缓存中提取(除非您明确告诉它不要这样做)。

4. 请参阅我对上面 #2 的回答，但只要您在突变中包含 id 和任何修改后的数据，Apollo 客户端就会为您处理。如果您添加新数据，例如将待办事项添加到列表，它不会为您处理。删除数据也是如此。