如何在Reactfire中使用Firestore模拟器？

编程问答 2022-08-16

问题描述

我已经在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？

解决方法

谢谢你们的帮助！ 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;
,

我找到了一个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});
    }),// 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，还可以预加载数据
firebasefirebasefirebase-toolsjavascriptreactfirereactjsreactjs