addin data to firestore database using react

Question

I want to add an array of users as a collection to fire-store database here is my code and i think its suppose to be working but i get nothing in the firestore databse collections so what exactly should i do can anyone help me with this??

import { addDoc ,  collection , setDoc , doc , getDocs} from "firebase/firestore";
import { db } from "./config";

 const Users = [
    {
      userId: "XF9EvlJQZHfZEClM23Bd39A7gai1",
      username: "John",
      fullName: "John John",
      emailAddress: "John@gmail.com",
      dateCreated: Date.now(),
    },
    {
      userId: "XF9EvlJQZHfZEClM23Bd39A7gai1",
      username: "John",
      fullName: "John John",
      emailAddress: "John@gmail.com",
      dateCreated: Date.now(),
    }]

Users.forEach(async (user) => {
     try {
      const docRef = await addDoc (collection(db , "users" , user.userId) ,{
        userId: user.userId,
        username: user.username,
        fullName: user.fullName,
        emailAddress: user.emailAddress,
        dateCreated: user.dateCreated,
      })
      console.log("Document written with ID : ",docRef.id)
     } catch(err){
      console. Error("Error adding document ",err)
     }
 })

here is my firestore database :

import { initializeApp } from "firebase/app";
import { getStorage } from 'firebase/storage';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from "firebase/auth";



const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};


export const app = initializeApp(firebaseConfig);
export const storage = getStorage();
export const db = getFirestore(app);
export const auth = getAuth();

Renaud Tarnec · Answer 1 · 2023-08-28T12:07:24.833

1

You should not use async/await within a forEach() loop, see "JavaScript: async/await with forEach()" and "Using async/await with a forEach loop".

You can use Promise.all() as follows:

const Users = [
  {
    userId: "XF9EvlJQZHfZEClM23Bd39A7gai1",
    username: "John",
    fullName: "John John",
    emailAddress: "John@gmail.com",
    dateCreated: Date.now(),
  },
  {
    userId: "XF9EvlJQZHfZEClM23Bd39A7gai1",
    username: "John",
    fullName: "John John",
    emailAddress: "John@gmail.com",
    dateCreated: Date.now(),
  }]

try {
  const promises = [];
  Users.forEach((user) => {
    promises.push(
      setDoc(doc(db, "users", user.userId),
        {
          userId: user.userId,
          username: user.username,
          fullName: user.fullName,
          emailAddress: user.emailAddress,
          dateCreated: user.dateCreated,
        })
    );
  });

  await Promise.all(promises);
} catch (error) {
  console.log(error)
}

edited Aug 28 '23 at 12:07

answered Aug 27 '23 at 12:39

Renaud Tarnec

79,263
10
95
121

i tried man I got nothing either , thanks – MH_Rabea Aug 27 '23 at 12:53
Do you get an error? Are there sole security rules that could prevent the writes? – Renaud Tarnec Aug 27 '23 at 13:01
Also note that similarly to export `const db = getFirestore(app);` you should do `export const auth = getAuth(app);` and the same for Storage. – Renaud Tarnec Aug 27 '23 at 13:21
no there isn't any errors – MH_Rabea Aug 28 '23 at 11:49
See the update to my code – Renaud Tarnec Aug 28 '23 at 12:00
Nope, that did not work either , there is something wrong with firestore am pretty sure that the code is okay – MH_Rabea Aug 28 '23 at 12:19
've deleted the whole app and still got nothing – MH_Rabea Aug 28 '23 at 12:21
I found the solution , I wrapped the whole database inside a function and called it inside the firebase config file and also changed the rules of fire-store to allow read and write and finally this worked for me, thank you anyway – MH_Rabea Aug 28 '23 at 13:17

score 0 · Answer 2 · answered Aug 27 '23 at 19:09

0

I think the path that you are giving it to set new users to the collection is not getting the id of the user so its not adding the doc

addDoc(collection(db, "users", user.userId)

Do this and let firebase gives them a unique id

addDoc(collection(db, "users")

or could be also what Renaud said, maybe you havent set the rules to allow you to edit the database.

answered Aug 27 '23 at 19:09

Rudis Gomez

17
4

i changed the rules to allow read and write if true and still got nothing – MH_Rabea Aug 28 '23 at 11:50

addin data to firestore database using react

2 Answers2