CODEWITHSUNDEEP
javascriptfirebasereact-nativegoogle-cloud-firestore
Dennis
Dennis

Reputation: 77

React Native Firebase adding and getting data

wondering if anyone can assist me in this matter. I'm following the documentation for https://rnfirebase.io/firestore/usage. it does not work for my use case for some reason.

I just need to set the data, which it works and then read it back so i can push it onto my state and i'll render it.

I just can't read the data back properly. This addItemFunction is trigger when when user click on a button to add.

 const addItemFunction = async (numb,exercise) =>{
     firestore().collection(userEmail).get().then((snap) =>{
         if(!snap.empty){

           var finalID = uuid.v4();
            firestore().collection(userEmail).doc(final).update({
              [finalID]:{
                exe:[exercise],
                num:[numb],
              }
            }).then(() =>{
//RETURN SNAPSHOT NOT WORKING
              console.log('user_added');
              firestore().collection(userEmail).doc(final).onSnapshot(documentSnapshot =>{
                console.log("here" + documentSnapshot.data());
              });
}

Thanks for your time.

Upvotes: 0

Views: 77

Answers (1)

Octavian Rotari
Octavian Rotari

Reputation: 345

If you are using react with hooks I would suggest you put the onSnapshot listener in a useEffect hook:

useEffect(() => {
  const unsubscribe = firestore
    .collection(collectionName)
    .doc(docId)
    .onSnapshot(
      (documentSnapshot) => {
        const document = documentSnapshot.data();
        console.log(document)
      },
      (error: Error) => {
        throw error;
      }
    );

  return () => unsubscribe();
}, [ docId, collectionName]);

this approach will separate concerns and the snapshots will run every time there is a change on the document, then where I put the console.log you could set the document to state.

Another approach will be to use get() instead of onSnapshot like:

const addItemFunction = async (numb,exercise) =>{
  firestore().collection(userEmail).get().then((snap) =>{
    if(!snap.empty){

      var finalID = uuid.v4();
      firestore().collection(userEmail).doc(final).update({
        [finalID]:{
          exe:[exercise],
          num:[numb],
        }
      }).then(() =>{
        console.log('user_added');
        firestore().collection(userEmail).doc(final).get().then(() => {
           console.log("here" + documentSnapshot.data());
        })


      }
    }
  }

this approach will not subscribe to changes and it will return the new updated document every time you call the addItemFunction

Upvotes: 1

Related Questions