javascript - 如何对分页项目执行 "go back"

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 件元素，但我想将它们分成三 block 。当继续处理数据时，这一切都很完美，但是我的问题是，我该如何返回？即如何获取前面页面的数据？

目前我手里有的是我拥有的元素总数，可以显示的限制，显然是我当前显示的三个元素。

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

所以我想这里有两个问题:如何返回到以前的数据？我怎样才能跳转不同的数据 block ？

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

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

我使用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 值，然后使用该值进行查询即可。

但说实话，您的总数据集非常小，而且可能根本不值得分页。我只是把整个事情记下来并记在心里。直到您达到数百或数千个文档(当然取决于每个文档有多大，以及您期望有多少可用内存)时，分页可能才变得值得。