如何将 firestore 模拟器与 reactfire 一起使用? [英] How to use firestore emulator with reactfire?

问题描述

我已按照 firebase 文档 在本地设置了 Firestore，并且我可以轻松测试 Firebase 功能.我很想使用本地 firestore 数据库在本地进行开发.在文档中，他们提供了以下代码:

I have set up firestore locally following the firebase docs and I can test firebase functions easily. I would love to develop locally with an local firestore database. In the docs they provide the following code:

// Initialize your Web app as described in the Get started for Web
// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.settings({
    host: "localhost:8080",
    ssl: false
  });
}

如果我将 reactfire 与 reactjs 一起使用，我该怎么做初始化火力基地?目前它的初始化如下:

How can I do this, if I use reactfire with reactjs to init firebase? Currently its initialised like this:

const firebaseConfig = {
  apiKey: "",
  authDomain: "example.firebaseapp.com",
  databaseURL: "https://example.firebaseio.com",
  projectId: "example",
  storageBucket: "example.appspot.com",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

ReactDOM.render(
  <React.StrictMode>
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <App/>
    </FirebaseAppProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

我应该只操作配置中的 databaseURL: 还是有其他最佳实践来连接到本地模拟器 firestore?

Should I just manipulate the databaseURL: in the config or is there another best practice to connect to the local emulator firestore?

推荐答案

我找到了一个 Github问题，其中建议使用 reactfire 中的 preloadFirestore.

I have found an Github Issue in which its suggested to use preloadFirestore from reactfire.

他们虽然在如果你想像他们一样使用它，你有一个这样的基本设置:

If you want to use it like they do, you have a basic setup like this:

// create a preload function to combine multiple preloads
const preloadSDKs = firebaseApp => {
  return Promise.all([
    preloadFirestore(firebaseApp, firestore => {
      return firestore().settings({host: 'localhost:8080', ssl: false});
    }),
    // preloadDatabase(), 
    // preloadStorage(), 
    // etc.
  ]);
};

function App() {
  const firebaseApp = useFirebaseApp();

  // Kick off fetches for SDKs and data that
  // we know our components will eventually need.
  //
  // This is OPTIONAL but encouraged as part of the render-as-you-fetch pattern
  // https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense
  preloadSDKs(firebaseApp).then(() => Promise.resolve());

  return (
    <YourComponents />
  )
}

之后，您只需在应用中的任何位置使用 useFirestore() 即可使用上述设置延迟加载它.

Afterwards you can just use useFirestore() anywhere in the app to lazy load it with the settings above.

提示:

• 在预加载 SDK 之前，您必须使用
• 预加载 SDK 的组件必须包含在 或 组件中
• 查看 reactfire 演示应用如何不仅可以预加载 SDK，还可以预加载数据

• You have to use the <FirebaseAppProvider /> before preloading the SDKs
• Your component preloading the SDKs has to be wrapped inside a <Suspense /> or <SuspenseWithPerf /> component
• Check the reactfire demo app to see how you can not only preload SDKs but data as well

这篇关于如何将 firestore 模拟器与 reactfire 一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！