如何使用 Apollo Client 的 fetchMore 方法更新 FlatList 的数据？

Question

我的 GraphQL 后端以以下形式返回数据：

{
  data: {
    feed: {
      A: [...],
      B: [...]
    }
  }
}

我的前端使用对数据中存在的某个字段进行排序来合并A和B ，然后使用 React Native 的FlatList将它们显示为单个数组。 我正在使用 Apollo 客户端来查询我的后端，如下所示：

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

if (loading) {...}
if (error) {...}

let A = [];
let B = [];
if (data!.feed.A) A = data!.feed.A
if (data!.feed.B) B = data!.feed.B
let feedData = sortedMerge(A,B);

return (
  <FlatList
    data={feedData}
    ...
    onEndReached{
      //update fetchArgs
      fetchMore({
        variables: fetchArgs,
        updateQuery: // Not sure if I need to do anything here?
      }).then(result => {
        // Maybe this is where I update?
      })
    }
)

但是，我似乎无法弄清楚如何或在哪里获取新数据，比如A'和B'合并并与feedData连接，以便我的FlatList可以尽可能高效地更新？

我想我遇到了麻烦，因为我不能直接更新列表并需要做一些预处理，但无论我在哪里更新feedData ，无论是在fetchMore之后的then块中还是在它之外， FlatList永远不会似乎更新。

Answer 1

尝试将合并逻辑放在useMemo中：

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

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

if (loading) {...}
if (error) {...}

return (
  <FlatList
    data={feedData}
    ...
    onEndReached = {() => fetchMore({ variables: fetchArgs })}
  />
)

执行fetchMore应该会导致data更新，这将触发useMemo并更新您的feedData变量。

但是，您仍然需要将分页结果合并到客户端缓存中。