Firebase firestore 分页返回重复的结果答案

【问题标题】：Firebase firestore Pagination is returning duplicate resultsFirebase firestore 分页返回重复的结果
【发布时间】：2020-08-30 17:14:22
【问题描述】：

我正在创建一个社交订阅源，我希望使用 Firebase 分页进行无限滚动，但即使我的 Firestore 数据库中有很多不同的数据，每次查询都返回相同的结果。

这是我的初始查询：

const getThreads = async () => {
    try {
      setLoading(true);
      const ref = firestore()
        .collection('Discover')
        .orderBy('rank', 'desc')
        .limit(10);

      let docSnaps = await ref.get();

      if (docSnaps.empty !== true) {
        let docData = docSnaps.docs.map(document => {
          return {
            data: document.data(),
            id: document.id,
          };
        });
        setLastVisible(docData[docData.length - 1].id);
        setThreads(docData); //Setting the data to display in UI
      }
      setLoading(false);
    } catch (e) {
      setLoading(false);
      console.log(e);
      Alert.alert(
        'Oops! Looks like something went wrong',
        'Please try again later',
        [{text: 'OK'}],
      );
    }
  };

如您所见，每个post/thread 都按rank 字段排序。我将最后一个可见设置为documentId，在下面的查询中使用它来获取更多posts/threads

async function getMoreThreads() {
    try {
      console.log('Getting More threads');
      if (lastVisible !== null) {
        setRefreshing(true);
        const ref = firestore()
          .collection('Discover')
          .orderBy('rank', 'desc')
          .startAfter(lastVisible)
          .limit(10);

        let docSnaps = await ref.get();

        if (docSnaps.empty !== true) {
          let docData = docSnaps.docs.map(document => {
            return {
              data: document.data(),
              id: document.id,
            };
          });
          console.log('DocData', docData.length);
          setLastVisible(docData[docData.length - 1].id);
          setThreads([...threads, ...docData]);
        }
        setRefreshing(false);
      }
    } catch (e) {
      console.log('Error getting more', e);
      Alert.alert(
        'Oops! Looks like somthing went wrong',
        'Please try again later',
        [{text: 'OK'}],
      );
    }
  }

我对为什么会发生这种情况的假设是因为我使用documentIds 进行分页，而我的文档 ID 是像这样的数字长整数字符串 1002103360646823936,1259597720752291841, 974895869194571776, etc.

非常感谢您的帮助。

【问题讨论】：

标签： javascript firebase react-native google-cloud-firestore

【解决方案1】：

你的假设是正确的。您用来与startAfter(...) 进行分页的字段应该与您在orderBy(...) 方法中使用的字段相匹配——在这种情况下，您的startAfter(...) 方法假设您传递给它一个rank 值。

您可以在 startAfter(...) 方法中传入 DocumentSnapshot 对象：

const ref = firestore()
          .collection('Discover')
          .orderBy('rank', 'desc')
          .startAfter(documentSnapshot) // document snapshot of the last element
          .limit(10);

【讨论】：