CODEWITHSUNDEEP
node.jsreactjsfirebasefirebase-realtime-database
Prince Umbrella
Prince Umbrella

Reputation: 29

Firebase not adding data to Realtime database in React

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.

enter image description here

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.

Upvotes: 0

Views: 1269

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 600006

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",
    });

Upvotes: 3

Related Questions