响应式变量

集成到 Apollo Client 响应式模型中的状态容器

新功能： Apollo Client 3, 响应式变量 是一种有用的机制，用于表示位于 Apollo Client 缓存之外的本地状态。因为它们与缓存分离，响应式变量可以存储任何类型的数据，并且可以在应用程序中的任何地方与其交互，无需使用 GraphQL 语法。

最重要的是，修改响应式变量将会触发每个依赖于该变量的活动查询的更新。 此外，这还将更新使用 useReactiveVar React 钩子。

查询 "依赖于" 一个响应式变量如果查询请求的任何字段定义了一个 read 函数来读取该变量的值。

创建

使用makeVar方法创建一个响应式变量，如下所示：

1
import { makeVar } from '@apollo/client';
2

3
const cartItemsVar = makeVar([]);

此代码将创建一个以空数组作为其初始值的响应式变量。

重要： makeVar的返回值是一个函数，您可以通过调用它来读取或修改内存变量的值。

读取

要读取记忆变量的值，请使用零个参数调用由makeVar返回的函数：

1
const cartItemsVar = makeVar([]);
2

3
// Output: []
4
console.log(cartItemsVar());

修改

要修改记忆变量的值，请使用一个参数（变量的新值）调用由makeVar返回的函数：

1
const cartItemsVar = makeVar([]);
2
const cartItemIds = [100, 101, 102];
3

4
cartItemsVar(cartItemIds);
5

6
// Output: [100, 101, 102]
7
console.log(cartItemsVar());
8

9
// Don't mutate an existing object or array.
10
// cartItemIds.push(456) will not trigger an update.
11
// Instead, pass a new copy:
12
cartItemsVar([...cartItemIds, 456]);
13

14
// Output: [100, 101, 102, 456]
15
console.log(cartItemsVar());

响应

正如其名所示，响应式变量可以触发应用程序中的响应式更改。您在响应式变量上修改值时，依赖该变量的查询会重新计算，应用程序的UI将相应更新。

借助useReactiveVar挂钩，React组件可以直接将其状态中的响应式变量值，而不必包裹在查询中。

有关更多信息，请参阅将本地状态保存在记忆变量中。

useReactiveVar 挂钩

您可以使用useReactiveVar挂钩以允许在React组件重新渲染时从响应式变量读取。

以前，响应式变量触发React组件重新渲染的唯一方法是通过使用useQuery。现在您不必使用useQuery即可利用ReactiveVar<T>提供的响应性。

1
import { makeVar, useReactiveVar } from "@apollo/client";
2
export const cartItemsVar = makeVar([]);
3

4
export function Cart() {
5
  const cartItems = useReactiveVar(cartItemsVar);
6
  // ...

示例应用程序

此示例待办事项应用程序使用响应式变量来跟踪当前待办事项列表和用于确定要显示哪些项目的过滤器的筛选器。请参阅 cache.tsx 特别是。

仅本地字段

客户端模式