如何在Reactfire上启用持久性? [英] How to enable persistence on reactfire?

问题描述

我想使用 reactfire 库在我的PWA React应用上实现Firestore离线持久性.

I'd like to implement Firestore offline persistence on my PWA React app using the reactfire library.

const firestore = useFirestore().enablePersistence();

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

  const { data } = useFirestoreDocData(documentReference);

但运行代码时出现错误:

but running the code i get an error:

FirebaseError:Firestore已经启动，并且无法再启用持久性.您只能在对Firestore对象调用任何其他方法之前启用持久性.

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> 内

This component is wrapped inside a <Suspense> as mentioned in the documentation

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

That database read is the only one that i make in the entire app, how can i solve?

编辑.

使用@Ajordat给出的示例，我已将 preloadFirestore 函数导入到App组件中，但确实出现了错误:

Using the example that @Ajordat gave, I've imported the preloadFirestore function inside the App component I do get an error:

无法读取未定义的属性'名称'".

"Cannot read property 'name' of undefined".

适应性强(因为我无法在fetch函数中使用钩子)@DougStevenson中的示例:我已经在 App 组件中导入了 useFirestore 函数(以获取Firestore对象)以启用持久性，然后将其导入( useFirestore )放入我的组件中以检索数据，但是现在，我得到了与以前相同的错误，

Whereas adapting (because I cannot use hooks inside the fetch function) the example from @DougStevenson: I've imported useFirestore function in the App component (in order to get the Firestore object) to enable persistence, and then importing it (useFirestore) into my component in order to retrieve the data, but now, I get the same error as before,

Firestore已经启动，无法再启用持久性.

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

我已经尝试过启用Persistence且没有错误，谢谢大家，这是我的方法，请告诉我这是否是最好的方法:

I've tried to enablePersistence without errors, thank guys, this is my approach, let me know if it is the best:

const firestore = useFirestore();

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

在我的自定义组件中:

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

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

但是现在我确实有一个问题，当我记录文档时，数据不会立即发出，是的，我知道这是一个异步操作，但是组件包装在< Suspense> 中.代码>，以这种方式:

But now I do have a problem, when I log the document, the data are not emitted instantly, yeah I know that it is an asynchronous operation, but the component is wrapped inside a <Suspense>, in this way:

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

但是在实际渲染组件之前，我看不到正在加载的文本.

But I don't see the loading text before the component is actually rendered.

悬念片段是否仅在加载函数(useFirestore)时显示后备组件，而不显示实际数据?

Does the suspense fragment show the fallback component only while is loading the function (useFirestore) and not the actual data?

好吧，我已经解决了，必须对数据进行解构，就像这样:

Well, I've solved, have to destructure the data, doing like that:

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

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

推荐答案

感谢@DougStevenson和@Ajordat的建议

Thanks for the suggestion guys @DougStevenson and @Ajordat

在应用程序组件中:

import { useFirestore } from "reactfire"

...

const firestore = useFirestore();

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

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

In your custom component, where you want to use 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上启用持久性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！