如何使用 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變量。

但是，您仍然需要將分頁結果合並到客戶端緩存中。