在 react native flatlist 中使用 Apollo 挂钩的最佳分页实现是什么？答案

【问题标题】：What is the best implementation of pagination using Apollo hooks in a react native flatlist?在 react native flatlist 中使用 Apollo 挂钩的最佳分页实现是什么？
【发布时间】：2021-08-08 07:15:20
【问题描述】：

我正在寻找有关如何在使用 apollo 钩子时最好地在 flatlist 提供的 onEndReached 回调中实现 loadMore 函数的见解！我已经让它工作了，除了每次我加载更多结果时，列表都会跳到顶部，因为 flatlist 的数据字段依赖于来自 useQuery 的传入数据，每次它要求更多时都会改变...... 我不知道我是否应该实施基于偏移和限制的分页、基于光标或其他一些策略。如果有人有提示，那将是巨大的！谢谢！

【问题讨论】：

标签： react-native apollo apollo-client

【解决方案1】：

我正在使用 Shopify 店面 graphql 查询来获取产品列表，以下是我如何在 FlatList 上使用基于光标的分页方法实现分页。希望你能找到一些有用的东西。

首先，声明两个变量，稍后将用于检查 Flatlist 是否滚动并到达末尾。

// declare these two variables
let isFlatlistScrolled = false;
let onEndReachedCalledDuringMomentum = false;

现在，创建一个名为 handleFlatlistScroll 的方法，用于在滚动平面列表时更改变量 isFlatlistScrolled 的值。

const handleFlatlistScroll = () => {
  isFlatlistScrolled = true;
};

同时声明一个方法来改变onEndReachedCalledDuringMomentum的值。

const onMomentumScrollBegin = () => {
  onEndReachedCalledDuringMomentum = false;
}

现在，像这样创建您的平面列表：

return (
  <Layout style={{ flex: 1 }}>
    <Query
      query={GET_PRODUCT_LIST_BY_COLLECTION_HANDLE}
      variables={{
        handle: props.route.params.handle,
        cursor: null,
      }}>
      {({
        loading,
        error,
        data,
        fetchMore,
        networkStatus,
        refetch,
        stopPolling,
      }) => {
        if (loading) {
          return <ProductListPlaceholder />;
        }
        if (data && data.collectionByHandle?.products?.edges?.length > 0) {
          stopPolling();
          return (
            <FlatList
              data={data.collectionByHandle.products.edges}
              keyExtractor={(item, index) => item.node.id}
              renderItem={renderProductsItem}
              initialNumToRender={20}
              onScroll={handleFlatlistScroll}
              onEndReached={() => {
                if (
                  !onEndReachedCalledDuringMomentum &&
                  isFlatlistScrolled &&
                  !isLoadingMoreProducts &&
                  !loading &&
                  data.collectionByHandle?.products?.pageInfo?.hasNextPage
                ) {
                  onEndReachedCalledDuringMomentum = true;
                  setLoadingMoreProductsStatus(true);
                  // your loadmore function to fetch more products
                }
              }}
              onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 0.1}
              onMomentumScrollBegin={onMomentumScrollBegin}
              // ... your other flatlist props
            />
          );
        }
        return <EmptyProductList />;
      }}
    </Query>
  </Layout>
)

正如你在上面的代码中看到的，加载更多的函数只有在 flatlist 在最后正确滚动时才会调用。

【讨论】：

感谢您的意见！您如何处理新结果的合并？当我加载新项目时，我的平面列表会重新呈现，因为数据属性发生了变化......
它基于您呈现平面列表的数据。我使用了一个返回数据变量的阿波罗查询，所以我只是将新的返回与该数据连接起来。您还可以将新数据与当前数据连接起来。