Trying to learn Firebase to add to my React project. Many answers deal with older versions with Firebase. Read that that Firebase 9 was a major update so difficult finding answers. I keep getting this error:
fetchxmlhttpfactory.js:270 POST http://localhost:8090/google.firestore.v1.Firestore/Listen/channel?database=projects%2Fabc-chart%2Fdatabases%2F(default)&VER=8&RID=41901&CVER=22&X-HTTP-Session-Id=gsessionid&%24httpHeaders=X-Goog-Api-Client%3Agl-js%2F%20fire%2F9.6.10%0D%0AContent-Type%3Atext%2Fplain%0D%0AX-Firebase-GMPID%3A1%3A177213787941%3Aweb%3A9f6ce48e7d16c61c3754cc%0D%0A&zx=7tsvfv2qwcyt&t=1 net::ERR_CONNECTION_REFUSED
and this one:
@firebase/firestore: Firestore (9.6.10): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]: The operation could not be completed
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
My firebase-config.js file, copied from Firebase as they suggest.
import { initializeApp } from 'firebase/app'
import { getFirestore, connectFirestoreEmulator } from '@firebase/firestore'
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// init firebase app
const app = initializeApp(firebaseConfig);
// init services: used to reach out to get data
export const db = getFirestore(app);
connectFirestoreEmulator(db, 'localhost', 8090);
and the React file App.js
import { useState, useEffect } from 'react';
import './App.css';
import { db } from './firebase-config';
import { collection, getDocs } from 'firebase/firestore';
function App() {
const [students, setStudents] = useState([]);
const studentCollectionRef = collection(db, "students");
useEffect(() => {
const getStudents = async () => {
const data = await getDocs(studentCollectionRef);
console.log(data);
}
getStudents()
}, [])
return (
<div className="App">
<header className="App-header">
Hey queen
</header>
</div>
);
}
export default App;
There are three things I can suggest based on what you've provided:
REACT_APP. Eg:apiKey: process.env.REACT_APP_API_KEY
Ensure your emulators are running before you connectFirestoreEmulator by running firebase emulators:start (optionally firebase emulators: start --import ./path/to/firestore-data)
Make sure that the port specified in your connectFirestoreEmulator (8090) is the same as the port specified in your firebase.json file.