监控缓存的请求

在响应缓存更改时更新您的UI

因为您的规范化缓存可以消除您的 GraphQL

当执行一个操作时，您可以使用 ApolloCall.watch 方法在该相关缓存数据更改时自动通知该操作：

1
apolloClient.query(TodoDetailsQuery())
2
  .watch()
3
  .collect { response ->
4
    // This code now executes on response *and*
5
    // every time cached data changes
6
  }

让我们看看一些示例。

监控查询

我们假设我们正在构建一个协作待办事项列表应用程序，该应用程序执行以下两个查询

# AllTodos.graphql

# Gets all todo items
query AllTodos {
  items {
    id
    completed
    title
  }
}

# TodoDetails.graphql

# Gets one todo item's details
query TodoDetails($id: String!) {
  item(id: $id) {
    id
    completed
    title
    content
  }
}

应用的主体视图执行 AllTodos 查询以显示待办事项 Item 列表，包括每个项目的 标题 和 完成状态。以下是一个示例响应：

1
{
2
  "data": {
3
    "items": [
4
      {
5
        "id": "0",
6
        "title": "Write code for Apollo Kotlin 3",
7
        "completed": true,
8
      },
9
      {
10
        "id": "1",
11
        "title": "Write documentation for Apollo Kotlin 3",
12
        "completed": false,
13
      }
14
    ]
15
  }
16
}

当有人选择了用户界面中的特定项目时，应用执行 TodoDetails 来显示该项目的全部详情。由于这是一个协作待办事项列表，自执行 AllTodos (即另一个用户做出了更改) 之后，这些详情可能已在后端发生变更。

在这种情况下，TodoDetails 查询可能返回如下内容：

1
{
2
  "data": {
3
    "item": {
4
      "id": "1",
5
      "title": "Write documentation for Apollo Kotlin 3",
6
      "completed": true,
7
      "content": "Don't forget docs about the normalized cache!"
8
    }
9
  }
10
}

在具有标准化缓存和正确配置的缓存ID 的情况下，更新后的 Item 将自动与从 AllTodos 返回的现有缓存 Item 合并。但是，我们的UI并不会自动更新以反映新的缓存数据。

要处理这个问题，我们在执行任何查询时可以调用 watch()：

1
apolloClient.query(TodoDetailsQuery())
2
  .watch()
3
  .collect { response ->
4
    // This code now executes on response *and*
5
    // every time cached data changes
6
  }

现在如果另一个操作更新了此查询的缓存字段，我们的UI将使用在查询最初返回时使用的相同逻辑进行渲染。

`在突变后更新缓存`

有时您需要更新缓存中的数据，以反映由一个变异造成的更改。

例如，在我们的待办事项列表应用程序中，用户可能会勾选已完成的项。这可能会执行以下变异以修改一个Item's completed 字段：

1
mutation SetTodoCompleted($id: String!, $completed: Boolean!) {
2
  setTodocompleted(id: $id, completed: $completed) { # Returns the modified Item
3
    id
4
  }
5
}

按原样，此变异更新服务器上的completed 字段，但不在缓存中。这是因为变异's Item's completed 字段未包含在响应中。

要自动使用新值更新缓存，您需要请求响应中所有修改过的字段：

1
mutation SetTodoCompleted($id: String!, $completed: Boolean!) {
2
  setTodoCompleted(id: $id, completed: $completed) {
3
    id
4
    # Ask for `completed` to update the cache
5
    completed
6
  }
7
}

由于上面的 setTodoCompleted 字段返回一个同时包含 id 和 completed 字段的 Item 类型，Apollo Kotlin 可以使用新数据更新缓存中的 Item 记录。此外，任何监听此 Item 的 completed 字段的观察者会自动收到通知。

`乐观更新`

通常可以在你的 GraphQL 服务器返回之前预测一个变异的最可能结果。Apollo Kotlin 可以利用这个 "最可能的结果" 来乐观地更新你的 UI，让你的应用对用户更加响应。

你可以这样使用 optimisticUpdates 方法提供乐观数据：

1
apolloClient.mutation(SetTodocompletedMutation(id = "1", completed = true))
2
  .optimisticUpdates(
3
    SetTodocompletedMutation.Data(
4
      id = "1",
5
      completed = true,
6
    )
7
  )
8
  .execute()

这个乐观数据会立即写入缓存，并且任何对应数据的观察者都会收到通知。然后当操作返回时，缓存会再次更新任何变化，并且观察者会再次收到通知。如果乐观数据是正确的，第二次缓存更新对用户来说是不可见的，因为没有数据变化。

上一页
程序性缓存 ID下一页
ApolloStore