Apollo Client：查询新数据时能否保留之前的旧数据？

要实现新查询加载时保留旧数据，核心是给useQuery添加keepPreviousData: true配置，再结合networkStatus判断加载状态，具体做法如下：

1. 修改useQuery配置
   添加keepPreviousData: true参数，这会让Apollo在变量变化发起新查询时，暂时保留上一次的查询结果，直到新数据返回：

   const { loading, data, error, refetch, networkStatus } = useQuery<
     RectangleQuery,
     RectangleQueryVariables
   >(RECTANGLE, {
     variables: { input: rectInput },
     fetchPolicy: 'cache-and-network',
     keepPreviousData: true, // 关键配置：保留旧数据直到新数据加载完成
   });
   

2. 正确判断加载状态
   添加keepPreviousData后，loading字段的行为会变化——新查询发起时它不会立刻变为true，此时要通过networkStatus来判断是否正在加载新数据：

   import { NetworkStatus } from '@apollo/client';
   
   // 判断是否正在加载新数据
   const isLoadingNewData = networkStatus !== NetworkStatus.ready;
   

   此时的状态流程会变成：

   • 发起新查询时：isLoadingNewData: true, data: [上一次的旧数据]
   • 新数据返回后：isLoadingNewData: false, data: [新数据]

3. 补充说明
   你之前尝试的fetchPolicy主要控制数据的来源（缓存/网络），但无法控制变量变化时是否保留旧数据。keepPreviousData是Apollo专门为分页、地图视口切换这类场景设计的特性，刚好匹配你的需求。

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