React-Apollo更新与Refetch

Question

我正在使用react-apollo，已经使用了一段时间。对我来说，已经成为问题的一件事是，使用变异时refetch无效。事实上，只要我一直在使用该应用程序，这就是一个已知问题。

我已经通过使用refetch查询中可用的道具解决了这个问题。

    <Query query={query} fetchPolicy={fetchPolicy} {...props}>
      {({ loading, data, error, refetch }) => {
     ... pass down to mutation
    </Query>

但是，我现在在文档中看到，您将更新方法作为突变的一部分，因此您应该在突变后使用此方法来更新应用程序。

您可以使用该update功能更新UI数据并在完成突变后更新它吗？如果可以的话，这是现在进行更新的标准方法吗？

*使用refetchQueries不起作用

正如您在图像中看到的那样，console.info()显示内容是，data.status = "CREATED";但直接从突变返回的请求data.status = "PICKED"; PICKED是数据库中正确且最新的信息。

Answer 1

按照优先顺序，您可以选择：

1. 什么都不做。对于定期更新单个节点，只要变异返回变异结果，Apollo就会为您自动更新缓存。如果此操作无法按预期工作，通常是因为查询缺少id（或_id）字段。当id字段不可用时，应将自定义dataIdFromObject函数提供给InMemoryCache构造函数。当人们将addTypename选项设置为时，自动缓存更新也会失败false。

2. 使用update。该update功能将在您的变异完成后运行，并让您直接操作缓存。如果该突变影响返回一个节点列表的字段，则这是必需的。与简单更新不同，Apollo无法推断出突变后是否应该更新列表（以及如何更新），因此我们必须自己直接更新缓存。在创建和删除突变之后，通常这是必需的，但在更新突变之后，如果应将已更新的节点添加或删除到返回列表的某个字段中，则也可能需要这样做。该文档详细介绍了如何执行此操作。

<Mutation
  mutation={ADD_TODO}
  update={(cache, { data: { addTodo } }) => {
    const { todos } = cache.readQuery({ query: GET_TODOS });
    cache.writeQuery({
      query: GET_TODOS,
      data: { todos: todos.concat([addTodo]) },
    });
  }}
>
  {(addTodo) =>(...)}
</Mutation>

3. 使用refetchQueries。除了更新缓存之外，您还可以提供一个refetchQueries函数，该函数应返回表示要重新获取的查询的对象数组。与使用相比，这通常不那么理想，update因为它需要对服务器进行一个或多个其他调用。但是，如果突变没有返回足够的信息来手动正确更新缓存，则可能是必要的。注意：返回的数组也可能是表示操作名称的字符串数组，尽管没有充分说明。

<Mutation
  mutation={ADD_TODO}
  refetchQueries={() => [
    { query: TODOS_QUERY, variables: { foo: 'BAR' } },
  ]}
>
  {(addTodo) =>(...)}
</Mutation>

4. 使用refetch。正如您在问题中已经显示的那样，可以使用组件内部组件refetch提供的功能来重新获取该特定查询。如果您的组件已经嵌套在组件内部，则很好，但是通常使用会是更清洁的解决方案，尤其是在需要重新查询多个查询的情况下。QueryMutationMutationQueryrefetchQueries

5. 使用updateQueries。这是一个遗留选项，已不再有据可查，但提供的功能与update以前update添加的功能类似。不应使用它，因为将来可能会不推荐使用。

更新：

您还可以通过以下方式设置架构：查询可以作为您的突变的一部分重新获取。有关更多详细信息，请参见本文。