CODEWITHSUNDEEP
reactjsfirebasefirebase-realtime-database
VersifiXion
VersifiXion

Reputation: 2292

Can't read datas from Firebase Database

I did a small React App to read datas from a Firebase database,

There are no visible errors, except that the "loading" hook below is always at true, but it's supposed to become false if everything's OK,

Here's the code of the app below (or available here https://github.com/Versifiction/firebase-api-github) :

Shape of Firebase DB

apigithub-db9e8
  pseudos
    pseudo: "Versifiction"

src/config/firebase.js

import firebase from "firebase";

const config = {
  apiKey: value,
  authDomain: value,
  databaseURL: value,
};

firebase.initializeApp(config);

export const db = firebase.database();

src/App.js

import React, { useEffect, useState } from "react";
import { db } from "./config/firebase";

import "./App.css";

function App() {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(async () => {
    try {
      db.ref("pseudos").on("value", (snapshot) => {
        setList(snapshot.val());
        setLoading(false);
      });
    } catch (err) {
      console.log("err ", err);
    }
  }, []);

  useEffect(() => {
    console.log("loading ", loading);
  }, [loading]);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div className="App">
      <h1>List</h1>
      {list &
        list.map((l, i) => (
          <>
            <p key={i}>{l}</p>
            <a href={`http://www.api.github.com/users/${l}`}>Github Link</a>
          </>
        ))}
    </div>
  );
}

export default App;

Upvotes: 0

Views: 152

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598817

Are you sure the user has permission to read the data? If you're not sure, check the logging output of your app for a permission denied message.

Another way to never miss this type of problem is to add an error callback to on:

db.ref("pseudos").on("value", (snapshot) => {
  setList(snapshot.val());
  setLoading(false);
}, (error) => {
  console.error(error);
})

Upvotes: 1

Related Questions