如何在reactfire上启用持久性？

Question

我想使用反作用火库在我的PWA应用程序上实现Fi还原离线持久性。

const firestore = useFirestore().enablePersistence();

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

  const { data } = useFirestoreDocData(documentReference);

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

FirebaseError:修复已经启动，并且不能再启用持久性。只有在调用Fi还原对象上的任何其他方法之前，才能启用持久性。

如文档中所述，此组件包装在<Suspense>中。

数据库读取是我在整个应用程序中所做的唯一一个，我如何解决？

编辑。

使用@Ajordat提供的示例，我在App中导入了preloadFirestore函数，得到了一个错误：

“无法读取未定义的属性‘名称’”。

而适应(因为我不能在获取函数中使用钩子)--@DougStevenson中的示例:我在useFirestore组件中导入了App函数(以获取Firestore对象)以启用持久性，然后将它(useFirestore)导入到组件中以检索数据，但现在，我得到了与前面相同的错误，

Firestore已经启动，并且不能再启用持久性。

编辑2：

我已经尝试过没有错误的enablePersistence，谢谢，这是我的方法，让我知道它是否是最好的：

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

谢谢你的建议，伙计们@DougStevenson和Ajordat

在app组件中：

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);

Answer 2

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

您必须弄清楚如何使用这个承诺来等待，直到在启用持久性的情况下进行查询。例如：

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

请注意，只有在完全启用持久性之后，查询才会完成。