React Native FlatList结合Apollo hooks实现分页的最优方案是什么

跳顶部的核心原因通常不是分页策略本身，而是以下几个常见实现错误：

• FlatList绑定了动态的key属性（比如key={data.length}），属性变化会触发列表完全重制，回到顶部
• keyExtractor使用数组下标作为返回值，加载更多后下标变化触发全量重渲染
• Apollo useQuery返回的data每次被全量替换，而非增量合并，导致FlatList误以为是全新数据集

你可以根据业务场景二选一：

• offset+limit分页：适合数据排序规则稳定、不会频繁插入删除的静态场景（比如按固定排序的商品列表、历史归档内容），实现成本最低，后端仅需接收两个参数即可，缺点是列表有实时新增/删除数据时，加载下一页会出现内容重复或者漏项
• cursor分页：适合动态性强、实时性要求高的场景（比如信息流、评论区、用户动态列表），是GraphQL生态的标准推荐分页方案，以上次返回的最后一条数据的唯一标识作为游标参数发起下一次请求，不会出现offset分页的重复/漏项问题，和Apollo Client的缓存自动合并能力适配性更好

前置修复（先解决跳顶部问题） #

1. 确保keyExtractor返回每条数据的唯一业务ID，绝对不能用数组下标作为key
2. 移除FlatList上绑定的动态key属性
3. 优先使用Apollo Client 3+的字段合并策略，无需手动写合并逻辑，性能更稳定

代码实现示例（cursor分页） #

1. 定义查询 #

query GetItemList($cursor: String, $limit: Int!) {
  itemList(cursor: $cursor, limit: $limit) {
    edges {
      node {
        id
        # 其他业务字段
      }
      cursor
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

2. 初始化Apollo Client时配置字段自动合并 #

import { ApolloClient, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
  uri: '你的接口地址',
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          itemList: {
            // 如果有过滤/排序参数，在这里指定不需要参与缓存key计算的字段
            keyArgs: [],
            merge(existing = { edges: [], pageInfo: {} }, incoming) {
              return {
                ...incoming,
                edges: [...existing.edges, ...incoming.edges]
              }
            }
          }
        }
      }
    }
  })
})

3. 组件内逻辑实现 #

import { useQuery, gql } from '@apollo/client'
import { FlatList, useCallback } from 'react-native'

const GET_ITEM_LIST = gql`/* 上面定义的查询 */`

function ListComponent() {
  const { data, loading, fetchMore } = useQuery(GET_ITEM_LIST, {
    variables: { limit: 20 },
    fetchPolicy: 'cache-and-network' // 可根据业务调整为cache-first
  })

  const loadMore = useCallback(async () => {
    // 没有下一页或者加载中直接返回
    if (!data?.itemList.pageInfo.hasNextPage || loading) return
    await fetchMore({
      variables: {
        cursor: data.itemList.pageInfo.endCursor,
        limit: 20
      }
    })
  }, [data, loading, fetchMore])

  const renderItem = useCallback(({ item }) => {
    // 你的列表项渲染逻辑
  }, [])

  return (
    <FlatList
      data={data?.itemList.edges.map(edge => edge.node) ?? []}
      keyExtractor={item => item.id}
      renderItem={renderItem}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5} // 距离底部还有列表50%高度时触发加载更多
      // 其他FlatList配置
    />
  )
}

offset分页适配方案 #

如果选择offset分页，仅需调整查询参数和合并逻辑即可：

• 初始查询变量传入offset: 0, limit: 20
• loadMore时传入offset: 已加载数据长度, limit: 20
• 字段合并策略直接拼接新旧结果数组即可，无需处理cursor相关逻辑

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