在Next.js中，使用Apollo Client获取的合并数组该如何存储？

我在Next.js中使用Apollo Client，通过单个查询获取Properties和Adverts两类数据，查询代码如下：

query getPropertiesAndAdverts() {
    search() {
        _id
        ref
        title
        price
        images {
            url
            description
        }
    }
    adverts {
        advertiser
        campaign
        url
        images {
            url
        }
        startDate
        endDate
    }
}

这两类数据都是数组，从远程获取后需要通过独立JS函数按特定规则合并成单个数组，用来渲染页面内容。核心疑问：合并后的数组该怎么存储？是存入React state、用Apollo Reactive Variables、写入Apollo cache还是其他方案？

补充使用场景：

• 合并后的数据要传递给其他组件，内容变化时这些组件需要重新渲染；
• 初始页面加载时自动获取数据，后续由用户交互（搜索提交、分页操作）触发重新获取；
• 用户每次提交新搜索时，需要按搜索条件重新获取远程数据，生成新的合并数组。

方案对比与选择建议 #

1. React State（ useState/useReducer ） #

适合情况：合并后的数据仅在当前页面或子组件树内使用，无需跨页面共享，且更新逻辑简单。

• 优点：
  • 贴合React原生状态管理逻辑，上手门槛低。组件只要依赖该state，数据变更时会自动触发重渲染，完全满足你「其他组件随数据更新」的需求；
  • 每次新搜索拿到数据后，执行合并函数得到新数组，直接更新state即可，逻辑清晰易懂；
• 缺点：
  • 无法跨页面共享数据，若其他页面也需要这份合并数据，要么重新查询，要么通过props层层传递，效率低下；
  • 页面刷新后state数据会丢失，需要重新触发查询初始化。

2. Apollo Reactive Variables #

适合情况：需要跨组件、跨页面共享合并后的数据，且希望数据变更时自动触发相关组件重渲染。

• 优点：
  • 与Apollo Client深度集成，属于同一生态体系，无需额外引入外部工具；
  • 具备响应式特性，任何通过useReactiveVar订阅该变量的组件，都会在变量更新时自动重渲染，完美匹配你「传递数据给其他组件并触发更新」的需求；
  • 更新逻辑灵活：每次查询完成后，执行合并函数生成新数组，直接赋值给Reactive Variable即可完成更新；
• 缺点：
  • 数据存储在内存中，页面刷新后会丢失，需重新查询初始化；
  • 相比React State多一步变量定义操作，但整体复杂度不高。

3. 写入Apollo Cache #

适合情况：合并后的数据需要与其他Apollo查询结果联动，或希望利用Apollo的缓存持久化能力。

• 优点：
  • 可配合apollo-cache-persist实现缓存持久化，页面刷新后数据不会丢失；
  • 若其他查询需要依赖这份合并数据，可直接从缓存中读取，无需重复计算；
• 缺点：
  • 需要自定义缓存类型与写入逻辑，比如先定义MergedContent自定义类型，再通过client.writeQuery或client.writeFragment写入缓存，操作相对繁琐；
  • 触发组件重渲染需依赖Apollo的useQuery或useFragment读取缓存，不如Reactive Variables直接高效。

最终推荐 #

结合你的三个使用场景，优先选择Apollo Reactive Variables，理由如下：

1. 完全满足「合并数据传递给其他组件，内容变化时触发重渲染」的核心需求，订阅变量的组件会自动响应数据变更；
2. 初始加载、用户搜索/分页触发查询后，只需在查询完成的回调中执行合并函数，再更新Reactive Variable即可，逻辑顺畅；
3. 每次新搜索获取新数据后，重新执行合并并赋值变量，就能生成新的合并数组，操作简单直观。

如果你的合并后数据仅在当前页面使用，没有跨组件/页面共享的需求，React State是更轻量的选择，无需额外使用Apollo的其他API。

内容的提问来源于stack exchange，提问作者ianyoung