CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-firestore
blcks1
blcks1

Reputation: 41

Fetching data from Firebase with react

Anyone have an idea how can i fetch data from firestore?

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
    apiKey: "AIzaSyCNBAxjeKNoAPPjBV0JW4vZ0QaTaOx9-L4",
    authDomain: "tomaproject-6b82b.firebaseapp.com",
    projectId: "tomaproject-6b82b",
    storageBucket: "tomaproject-6b82b.appspot.com",
    messagingSenderId: "1041229848485",
    appId: "1:1041229848485:web:3678c821ef1bd3a9"
};

// Use this to initialize the firebase App
const firebaseApp = firebase.initializeApp(firebaseConfig);

// Use these for db & auth
const db = firebaseApp.firestore();
const auth = firebase.auth();

export default { auth, db };

I am trying to fetch data using db.collection in useEffect function.

Error i keep getting : firebase__WEBPACK_IMPORTED_MODULE_6_.default.collection is not a function

Any suggestions?

import db from '../../firebase';

const HomeScreen = (props) => {

    const username = props.email
    return (
        <div className={styles['wrapper']}>
            <Container className={styles['wrapping-container']} >
                <h2 className={styles['Login-user-class-paragraph']}> Welcome {username}!</h2>
                <Row>
                    <Col md={2}>
                        <Container>
                            <SidePanel />
                        </Container>
        </div>
    )
}

export default HomeScreen;

Upvotes: 0

Views: 46

Answers (1)

Dharmaraj
Dharmaraj

Reputation: 50830

The { auth, db } is default export from firebase.js.:

import db from "../../firebase"

// db is { auth, db }
// db.collection will throw the error
// db.db.collection() will work as intended

Alternatively, you can remove the default so the export statement is:

export { auth, db }

Then import Firestore instance as shown below:

import { db, auth } from "../../firebase"

// here db is Firestore instance

Upvotes: 1

Related Questions