如何在 reactfire 上启用持久性？

Question

我想使用 reactfire 库在我的 PWA React 应用程序上实现 Firestore 离线持久化。

const firestore = useFirestore().enablePersistence();

  let documentReference = firestore
    .collection("food")
    .doc("milkshake");

  const { data } = useFirestoreDocData(documentReference);

但是运行我得到的代码是错误的：

FirebaseError: Firestore has already been started and persistence can no longer be enabled. You can only enable persistence before calling any other methods on a Firestore object.

如文档

中所述，此组件包装在 <Suspense> 中

那个数据库读取是我在整个应用中唯一的一个，我该如何解决？

编辑。

使用@Ajordat 给出的示例，我在 App 组件中导入了 preloadFirestore 函数，但我确实遇到了错误：

"Cannot read property 'name' of undefined".

而适应（因为我不能在 fetch 函数中使用钩子）来自@DougStevenson 的示例：我在 App 组件中导入了 useFirestore 函数（以获取 Firestore 对象）以启用持久性，然后将其导入 (useFirestore) 到我的组件来检索数据，但现在，我得到了和以前一样的错误，

Firestore has already been started and persistence can no longer be enabled.

编辑 2：

我试过启用持久性没有错误，谢谢你们，这是我的方法，让我知道它是否是最好的：

const firestore = useFirestore();

  React.useEffect(() => {
    firestore.enablePersistence();
  }, []);

在我的自定义组件中：

let docRef = useFirestore()
    .collection("food")
    .doc("milkshake");

  let document = useFirestoreDocDataOnce(docRef);
  console.log(document)

但现在我遇到了一个问题，当我记录文档时，数据不会立即发出，是的，我知道这是一个异步操作，但是组件被包裹在一个 <Suspense> 中，在这样：

<Suspense fallback={<div>Loading</div>}>
  <FoodComponent foodName={"Milkshake"} />
</Suspense>

但是在组件实际呈现之前我没有看到加载文本。

悬念片段是否仅在加载函数 (useFirestore) 而不是实际数据时显示回退组件？

嗯，我已经解决了，必须解构数据，这样做：

let docRef = useFirestore()
    .collection("food")
    .doc("milkshake");

  let { data: document } = useFirestoreDocData(docRef);
  console.log(document)

Answer 1

关于 Firestore 的其他 JavaScript 个库，enablePersistence() returns 一个承诺。这意味着它将在未来某个时间完成，无法保证需要多长时间。如果您在调用 enablePersistence() 后立即执行查询，而不等待返回的承诺实现，那么您将看到此错误消息。那是因为查询“击败”持久层并首先有效执行。

您将不得不弄清楚如何使用该承诺来等待，直到可以在启用持久性的情况下进行该查询。例如：

seFirestore().enablePersistence()
.then(() => {
  let documentReference = firestore
    .collection("food")
    .doc("milkshake");
  const { data } = useFirestoreDocData(documentReference);
})
.catch(error => {
  console.error("enablePersistence failed", error);
})

注意仅在持久性完全启用后查询将如何完成。

Answer 2

感谢@DougStevenson 和@Ajordat 的建议

在应用组件中：


import { useFirestore } from "reactfire"

...

const firestore = useFirestore();

React.useEffect(() => {
  firestore.enablePersistence();
}, []);

在您要使用 Firestore 的自定义组件中：


import { useFirestore, useFirestoreDocData /* or what you want to use */ } from "reactfire"


let docRef = useFirestore()
  .collection("food")
  .doc("milkshake");

let { data: document } = useFirestoreDocData(docRef);

console.log(document);

如何在 reactfire 上启用持久性？

How to enable persistence on reactfire?

javascript

firebase

reactjs

reactfire

google-cloud-firestore