Firebase not adding data to Realtime database in React

Question

I was following along this tutorial to connect Firebase using react hooks. I followed everything but I am having a problem interacting with the real-time database on my project. For example, when I tried to insert data into the database, it doesn't make any changes it just shows null; I tried to see if it was other problems, tried it with different accounts, creating new projects, but nothing seems to work.

My App.js looks like this:

import React from "react"
import "./App.css"
import firebase from "./firebase"
function App() {
    firebase
        .firestore()
        .collection("notes")
        .add({
            title: "Working",
            body: "This is to check the Integration is working",
        });
    return (
        <div className="App">
            <h2>Note Taking App</h2>
            <p>using React Hooks and Firebase</p>
            <h3>Notes : </h3>
        </div>
    )
}
export default App

I checked the rules for the realtime database on firebase, and it shows:

{
  "rules": {
    ".read": "now < 1610427600000",  // 2021-1-12
    ".write": "now < 1610427600000",  // 2021-1-12
  }
}

My app runs properly, but on the console, since I was logging the XHRHttpRequests, it shows something is failing on the GET request.

It is a newly created project and I only changed the App.js and added firebase.js that looks exactly like the one in the guide.

You have no code that checks the result of add() for errors. It could be failing and you'd never know. Also, the security rules you have here are for Realtime Database but your code is writing to Firestore. They are completely different database systems. — Doug Stevenson
– Doug Stevenson, Commented Dec 14, 2020 at 4:10
Thank you I changed the add() to Realtime Database version and it worked — Prince Umbrella
– Prince Umbrella, Commented Dec 14, 2020 at 4:59

Frank van Puffelen · Accepted Answer · 2020-12-14 04:47:58Z

3

The security rules you show are for the Firebase Realtime Database, but the code you have is accessing Cloud Firestore. While both databases are part of Firebase, they are completely separate and have different APIs.

To write to the Realtime Database would look something like this:

firebase
    .database()
    .ref("notes")
    .push({
        title: "Working",
        body: "This is to check the Integration is working",
    });

answered Dec 14, 2020 at 4:47

Frank van Puffelen

603k85 gold badges895 silver badges868 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prince Umbrella Over a year ago

I tried to upvote but not enough reputation so I clicked on the checkmark (✓) to accept it

Collectives™ on Stack Overflow

Firebase not adding data to Realtime database in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related