如何使用来自 GCP Firestore 的大量数据在 Vue.js 数据表中工作

Posted 2023-02-22

【中文标题】如何使用来自 GCP Firestore 的大量数据在 Vue.js 数据表中工作

【英文标题】：How to work in Vue.js data table with huge amount of data from GCP Firestore

【发布时间】：2021-09-20 10:10:08

【问题描述】：

在观看了大量有关 GCP Firestore 的视频后，我仍然在问自己，处理来自 Firestore 的大量数据的最佳方式是什么？

像 800 000 件产品，我想把它们全部显示在这样的datatable with Quasar：

我如何让它实时工作，例如在不超过我的配额使用量的情况下监听每个项目的变化以避免为愚蠢的代码支付高额费用？

后端：

app.get('/products/get', async (req, res) => 
  const snapshot = await db.collection('products3P').limit(20).get()

  const result = snapshot.docs.map(doc => doc.data())

  res.json(result)
)

前端：

<q-table title="Products"
  :rows="rows"
  :columns="columns"
  :filter="filter"
  row-key="name"
  no-data-label="No results"
/>

// Fetching results from backend once page is loaded:
api.get('/api/products/get').then(( data ) => 
  data.forEach(i => 
    rows.value.push(
      name: i.name,
      sku: i.sku,
      model: i.model,
      brand: i.brand,
      description: i.description
    )
  )
)

Binance 的 Market 页面就是一个很好的例子，让数据表高效的最佳解决方案是什么？

任何链接或建议将不胜感激。

【问题讨论】：

您在最终用户和 Firebase 之间有自己的服务器吗？

现在是的，它是这样的：1. 前端请求后端，2. 后端请求 Firestore。我正在考虑直接从前端请求 Firestore 数据。

【参考方案1】：

您可以paginate 一次只显示 20 个（或您喜欢的数量）项目。当用户更改页面时，加载下一组项目并显示它们。 Quasar 在他们的表格中有一个loading state，您可以在第一次加载下一个文档时使用它。

要显示实时更新，您可以listen 仅查看这 20 个项目的文档。

db.collection("products3P").orderBy("somefield")
    .onSnapshot((querySnapshot) => 
        const products = [];
        querySnapshot.forEach((doc) => 
            products.push(doc.data().name);
        );
        console.log("Current products: ", products.join(", "));
        // Update the Table
    );

您可以将该数组（对象）设置为该表(rows.values) 并呈现数据。您可以通过检查change type 来确保所做的更改只是当前正在更新的文档，而不是正在添加的新文档（如果您愿意的话）。

querySnapshot.docChanges().forEach((change) => 
  if (change.type === "modified") 
    console.log("Modified product: ", change.doc.data());
  
  // else don't update in that array
)

要更新现有数组（行）中的更改，您可以关注this answer 更新数组中的项目。

请注意，您的服务器不参与此过程。 如果您需要通过您的服务器执行此操作，则必须使用 Web 套接字，但如上所示直接使用 Firestore 肯定更容易.还要确保您detach listeners 以前的产品。

【讨论】：

我会试一试，谢谢你的回答