如何通过Apollo Client的fetchMore方法更新FlatList数据？

核心问题 #

你现在的问题是没有正确更新Apollo缓存，直接修改局部变量feedData不会触发React组件重渲染，必须让useQuery返回的data发生变化，才能重新计算feedData并更新FlatList。

正确实现步骤 #

1. 用updateQuery合并缓存数据
   fetchMore的updateQuery参数是用来告诉Apollo如何把新获取的数据合并到现有缓存里的，这是关键。你需要在这里把新的A'和B'分别追加到旧数据的A和B数组中：

   fetchMore({
     variables: fetchArgs,
     updateQuery: (prevResult, { fetchMoreResult }) => {
       // 如果没有新数据，直接返回旧数据
       if (!fetchMoreResult) return prevResult;
       
       // 合并A数组：旧A + 新A
       const mergedA = [...prevResult.feed.A, ...fetchMoreResult.feed.A];
       // 合并B数组：旧B + 新B
       const mergedB = [...prevResult.feed.B, ...fetchMoreResult.feed.B];
       
       // 返回新的缓存结构，Apollo会自动更新useQuery的data
       return {
         feed: {
           ...prevResult.feed,
           A: mergedA,
           B: mergedB,
         },
       };
     },
   })
   

2. 用useMemo优化排序合并逻辑
   每次data变化时，重新执行sortedMerge会有性能损耗，用useMemo缓存计算结果，只有当A或B数组变化时才重新计算：

   import { useMemo } from 'react';
   
   // ...
   
   const feedData = useMemo(() => {
     const A = data?.feed.A || [];
     const B = data?.feed.B || [];
     return sortedMerge(A, B);
   }, [data?.feed.A, data?.feed.B]);
   

3. 移除手动修改feedData的逻辑
   不要在then块里手动修改feedData，因为updateQuery已经更新了缓存，useQuery的data会自动更新，feedData会通过useMemo重新计算，触发FlatList更新。

完整代码示例 #

import { useQuery } from '@apollo/client';
import { useMemo } from 'react';
import { FlatList } from 'react-native';

// ...

const { fetchMore, loading, data, error } = useQuery(fetchQuery, { variables: fetchArgs });

if (loading) { /* 加载状态UI */ }
if (error) { /* 错误状态UI */ }

const feedData = useMemo(() => {
  const A = data?.feed.A || [];
  const B = data?.feed.B || [];
  return sortedMerge(A, B);
}, [data?.feed.A, data?.feed.B]);

return (
  <FlatList
    data={feedData}
    // ...其他FlatList属性
    onEndReached={() => {
      // 更新分页参数（比如offset、cursor）
      const newFetchArgs = { ...fetchArgs, /* 这里修改分页参数 */ };
      fetchMore({
        variables: newFetchArgs,
        updateQuery: (prevResult, { fetchMoreResult }) => {
          if (!fetchMoreResult) return prevResult;
          return {
            feed: {
              ...prevResult.feed,
              A: [...prevResult.feed.A, ...fetchMoreResult.feed.A],
              B: [...prevResult.feed.B, ...fetchMoreResult.feed.B],
            },
          };
        },
      });
    }}
  />
);

关键原理 #

Apollo Client的useQuery是基于缓存驱动的，只有当缓存中的数据变化时，data才会更新，触发组件重渲染。updateQuery的作用就是修改缓存，让data自动更新，进而让feedData重新计算，FlatList就能拿到新的合并后的数据并更新。

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