firebasepolymerfirebase-realtime-databasepolymer-1.0polymerfire

<firebase-query> error: "Cannot create property '$key' on string..."


I am trying to use the polymerfire/firebase-query to load my data stored in Firebase using the Vaadin Expense Manager Demo. Specifically, I am trying to replace the <vaadin-pouchdb> element with a combination of <firebase-query> and </app-indexeddb-mirror>.

https://github.com/vaadin/expense-manager-demo/blob/master/src/overview-page.html
<firebase-query
  id="query"
  log
  app-name="my-firebase"
  path="[[user.uid]]"
  data="{{expenses}}">
</firebase-query>

When I try to load the page, I expect to see my grid populate with test data; but instead, I get the following errors.

console.log

firebase.js:284 Uncaught TypeError: Cannot create property '$key' on string 'foo'

firebase.js:284 Uncaught TypeError: Cannot create property '$key' on string 'new'

firebase.js:284 Uncaught TypeError: Cannot create property '$key' on number '123'

The value of {{expenses}} I expect to be delivered to the app via <firebase-query> is the following:

expenses = [
  {
    total    : 123   ,
    status   : 'new' ,
    merchant : 'foo' ,
  },
]

What could be creating this error? Why is there a property '$key', trying to be created? Oh, wait. Could it be because there is no key associated with the expenses as they are stored in my Firebase?

Edit:

Here is what the data looks like in Firebase:

my-firebase
│
└──my-userid-abc-123
   ├── merchant: "foo"
   ├── status: "new"
   └── total: 123

Solution

  • Using <firebase-query> on locations where all of the children have primitive (boolean, string, number) values is not supported. Please consider nesting these values in objects.