CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-realtime-databasereactfire
IronWaffleMan
IronWaffleMan

Reputation: 2692

ReactFire isn't loading data from Realtime Database

I have a Firebase project with a realtime database which contains a few test items, in this structure:

project-21093
|_items
  |_item1
    |_name: "Name"
    |_category: "Category"
  |_item2
    |_name: "Name2"
    |_category: "Category:

My index.html file includes the <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script> tag, and this is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import firebase from 'firebase/app';
require("firebase/auth");
require("firebase/database");
import ReactFireMixin from 'reactfire';
require("./styles/customisations.scss");

// Initialize Firebase
var config = {
  apiKey: "key",
  authDomain: "auth",
  databaseURL: "url",
  storageBucket: "storage",
};
firebase.initializeApp(config);

var App = React.createClass({
  mixins: [ReactFireMixin],

  getInitialState: function() {
    return {
      items: []
    };
  },

  componentWillMount: function() {
    var fireRef = firebase.database().ref("items");
    this.bindAsArray(fireRef, "items");
  },

  render: function() {}
})

The whole config section was taken directly from what the project page gave me. It didn't work in index.html as was instructed, so I loaded it here. I'm not sure which requirements exactly were needed so I loaded a bunch.

My problem is that this.state.items is always empty, despite having items in my realtime database, which I assume are meant to be bound to the this.state.items array in componentWillMount. Since the docs never specify what parameter needs to be passed in to the firebase.database().ref() call, I've tried everything from project/items, project-21093/items and variations to database/data/items with no success. The React plugin of Chrome dev tools clearly shows me the empty array. What am I missing to load this data successfully?

Upvotes: 1

Views: 465

Answers (1)

IronWaffleMan
IronWaffleMan

Reputation: 2692

Turns out that in the 'Rules' section of the 'Realtime Database' tab, I needed to change the rules a bit:

{
  "rules": {
    ".read": true,
    ".write": "auth != null"
  }
}

With .read set to "auth != null" I couldn't access anything, changing it to true finally lets me get my data. Nowhere in any of the startup docs was this mentioned, so it wasn't until I saw this Firecast video that I knew what to do. I'm still unsure how I'm going to configure this for proper web usage, but at least I can make my app with some data now.

Upvotes: 1

Related Questions