"Uncaught TypeError: Cannot read property 'push' of null" with Polymer 3 and polymerfire3

Question

I'm working in a project with Polymer 3 and polymerfire3. Right now I have been able to use firebase-auth element successfully. But now that I'm trying to use the firebase-query element I get this on the console Uncaught TypeError: Cannot read property 'push' of null

This is my code

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';
import 'polymerfire3/firebase-auth.js';
import 'polymerfire3/firebase-query.js';

class PerfilView extends PolymerElement {
  static get properties() {
    return {
      user: Object,
      uid: String,
      data: {
        type: Object,
        observer: 'dataChanged'
      }
    };
  }

  static get template() {
    return html`

      <firebase-auth
        id="auth" user="{{user}}">
      </firebase-auth>

      <firebase-query
        log
        id="query"
        app-name="morse"
        path="/notes/"
        data="{{data}}">
      </firebase-query>

      <div class="card">
        <div id="notes">
          <ul id="notes-list">
            <template is="dom-repeat" items="{{data}}" as="note">
              <li>
                <p class="content">{{note}}</p>
              </li>
            </template>
          </ul>

          <paper-input value="{{inputP::input}}" label="Take a note.."></paper-input>
          <div id="notes-controls">
            <paper-button id="add" on-tap="add">Add</paper-button>
          </div>
        </div>
      </div>
    `;
  }
  add() {
    this.$.query.ref.push({
      content: this.inputP
    });
  }
}

window.customElements.define('perfil-view', PerfilView);

Does it have something to do with the polymerfire3 elements?

Answer 1

You will need to add polymer-document in order to add a record. Additional to your code, something like:

  <firebase-document
    id="document"
    app-name="morse"
    path="/notes/[[key]]"
    data="{{edata}}">
  </firebase-document>

and pushing new data may look like ;

add() {
    var key = firebase.database.ref('notes').push().key;
    this.set('edata', this.inputP);
    this.set('key', key); 
    // this new Note will be syncronised upon new key and edata properties defined. Here firebase-document will keep sysnronised with edata and path. 
}

Answer 2

firebase-query element is basically utilized for -

combining the given properties into query options that generate a query, a request for a filtered, ordered, immutable set of Firebase data

Here is further to read up on.

I think, what you're trying to do, can simply be achieved as follows -

add(noteData) {
    let newNoteRef = firebase.app().database().ref('notes').push();

    return newNoteRef.set(noteData).then(() => {
       console.log(`a new note successfully added.`);
    });
}

Upon successful data upsert firebase-query will automatically update data bound-variable to reflect the new list.