如何将firestore模拟器与reactfire一起使用？答案

【问题标题】：How to use firestore emulator with reactfire?如何将firestore模拟器与reactfire一起使用？
【发布时间】：2020-12-06 00:55:39
【问题描述】：

我在firebase docs 之后在本地设置了firestore，我可以轻松测试firebase 功能。我很想使用本地 Firestore 数据库进行本地开发。在文档中，他们提供了以下代码：

// 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 来初始化 firebase，我该怎么做？目前它的初始化如下：

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？

【问题讨论】：

标签： javascript reactjs firebase firebase-tools reactfire

【解决方案1】：

我找到了一个 Github Issue，其中建议使用 reactfire 中的 preloadFirestore。

他们虽然在their sample app 中提供了一个例子：

preloadFirestore(firebaseApp, firestore => { 
  return firestore().enablePersistence(); 
}),

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

// 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() 以通过上述设置延迟加载它。

提示：

在预加载 SDK 之前，您必须使用 <FirebaseAppProvider />
您的预加载 SDK 的组件必须封装在 <Suspense /> 或 <SuspenseWithPerf /> 组件中
查看reactfire demo app，了解如何不仅可以预加载 SDK，还可以预加载数据

【讨论】：

【解决方案2】：

感谢你们的帮助！ Reactfire api 再次更改，这是目前有效的解决方案：


import React from 'react';
import logo from './logo.svg';
import './App.css';
import Answers from './components/answers'
import HomeScreen from './screens/HomeScreen'
import { preloadFirestore, useFirebaseApp } from 'reactfire'
import firebase from 'firebase'

const preloadSDKs = (firebaseApp: firebase.app.App) => {
  return Promise.all([
    preloadFirestore({
      firebaseApp,
      setup: firestore => {
      return firestore().settings({host: 'localhost:8080', ssl: false});
    }
    }),
    // preloadDatabase(),
    // preloadStorage(),
    // etc.
  ]);
};

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

  preloadSDKs(firebaseApp).then(() => Promise.resolve());

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <HomeScreen />
      </header>
    </div>
  );
}

export default App;

【讨论】：

【解决方案3】：

Reactfire docs on emulation 现在与之前的答案中提到的不同，它们已于 2021 年 8 月更新。

我已经修改了他们的示例，向您展示如何在 Firebase v9+ 中使用 firestore 和 auth 模拟器：

import { getAuth, connectAuthEmulator } from 'firebase/auth'; // Firebase v9+
import { getFirestore, connectFirestoreEmulator } from 'firebase/firestore'; // Firebase v9+

import { FirebaseAppProvider, DatabaseProvider, AuthProvider, useFirebaseApp } from 'reactfire';

function FirebaseComponents({ children }) {
  const app = useFirebaseApp();
  const firestore = getFirestore(app);
  const auth = getAuth(app);

  // Check for dev/test mode however your app tracks that.
  // `process.env.NODE_ENV` is a common React pattern
  if (process.env.NODE_ENV !== 'production') {
    // Set up emulators
    connectFirestoreEmulator(firestore, 'localhost', 8080);
    connectAuthEmulator(auth, 'http://localhost:9099');
  }

  return (
    <AuthProvider sdk={auth}>
      <FirestoreProvider sdk={firestore}>
        <MyCoolAppThatUsesAuthAndFirestore />
      </FirestoreProvider>
    </AuthProvider>
  );
}

其他模拟器也存在类似的连接模式（connectStorageEmulator、connectDatabaseEmulator 等...）

【讨论】：