如何“返回”分页项目

Question

我有一个简单的集合，我想分页。 我想通过一个名为createdAt 的时间戳文档对其进行排序和分页。

这是当前调用的样子：

function getPaginatedItems (db, startAfter) {
  return db
    .collection('items')
    .orderBy('createdAt')
    .startAfter(startAfter) // startAfter parameter will be a createdAt Timestamp doc
    .limit(3)
    .get()
}

为了使它更易于使用和显示，我创建了一个函数，将这个查询快照转换为一个分页对象。这看起来像这样：

function querySnapshotToPaginatedObject (querySnapshot, total, limit = 3) {   if (querySnapshot.empty) {
    return {
      total: 0,
      limit,
      data: []
    }
  } else {
    return {
      total,
      limit,
      data: querySnapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }))
    }
  }
}

就目前而言，我的 Firestore 中总共有 11 件物品，但我想将它们分成三块。这一切都在处理数据时完美运行，但是我的问题变成了，我该如何回去？也就是如何从之前的页面中获取数据？

目前我手中的东西是我拥有的物品总数，可以显示的限制以及我目前正在展示的三个物品。

我不知道如何跟踪所有其他页面以便跳回页面，或者跳多页。

所以我想这里有两个问题：我如何回到以前的数据？以及如何跳转不同的数据块？

是否有另一种方法可以做到这一点，也许是通过索引而不是特定的文档（就像我对 createdAt 所做的那样）？

编辑：有人问我如何进行下一个查询。基本上我有按钮（都带有页码），当我点击它们时，我会从最后一项的createdAt 属性开始第二次调用。然后我对我的初始查询进行第二次调用，但将最后一个对象作为startAfter 参数传递给getPaginatedItems 函数调用。

我使用 react 作为前端，所以看起来像这样：

getNextBatch (startAfter) {
  return { 
    paginatedItems: querySnapshotToPaginatedObject(
      await getPaginatedItems(db, startAfter), 11, 3
    )
  } 
}

...
export default class MyComponent extends React.Component (
  render () {
    return (
      <div>
        {this.props.paginatedItem.map(x => <div>{x.name} {x.createdAt}</div>)}

        <button onClick={(evt) => console.warn('How do I go back???')}>
          Back
        </button>
        <button onClick={(evt) => getNextBatch(paginatedItem[paginatedItem - 1].createdAt)}>
          Next
        </button>
      </div>
    )  
  }
)

请记住，每次单击按钮时组件都会重新渲染。

Answer 1

Cloud Firestore API 不提供向后翻页的方法。在您的情况下，最简单的方法是记住您用来获取每个页面的startAfter 值列表。每个值将代表一页数据。这样，返回上一页只需从该列表中找到所需的 startAfter 值，然后使用该值进行查询。

不过，老实说，您的总数据集非常小，可能根本不值得分页。我只是得到整个事情并记住它。在达到成百上千个文档之前，分页可能并不值得（当然，这取决于每个文档有多大，以及您希望有多少可用内存）。