Implementing a Database - Cannot read property 'initializedRelationships' of undefined - Ember js

Question

here is the adapter In Ember Data, an Adapter determines how data is persisted to a backend data store. Things such as the backend host, URL format and headers used to talk to a REST API can all be configured in an adapter.

/* adapters/application.js */

import FirebaseAdapter from "emberfire/adapters/firebase";

export default FirebaseAdapter.extend({});

A Controller is routable object which receives a single property from the Route .. here is the controller

/* controllers/cars.js */

import Controller from "@ember/controller";

export default Controller.extend({
  actions: {
    deleteCar(id) {
      this.get("store")
        .findRecord("car", id, { reload: true })
        .then(car => {
          car.destroyRecord();
          car.save();
          //self.transitionToRoute("cars");
         });
    }
  }
});

/* controllers/cars/edit.js */

import Controller from "@ember/controller";

export default Controller.extend({
  actions: {
    editCar: function(id) {
      var self = this;
      var make = this.get("model.make");
      var model = this.get("model.model");
      var year = this.get("model.year");
      this.store.findRecord("car", id).then(function(car) {
        car.set("make", make);
        car.set("model", model);
        car.set("year", year);
        car.save();
        self.transitionToRoute("cars");
      });
    }
  }
});

/* controllers/cars/new.js */

import Controller from "@ember/controller";

export default Controller.extend({
  actions: {
    addCar: function() {
      var self = this;
      var rand = Math.floor(Math.random() * 10000 + 1);
      var newCar = this.store.createRecord("car", {
        id: rand,
        make: this.get("carMake"),
        model: this.get("carModel"),
        year: this.get("carYear")
      });
      newCar.save();
      self.transitionToRoute("cars");
    }
  }
});

In Ember Data, models are objects that represent the underlying data that your application presents to the user. Note that Ember Data models are a different concept than the model method on Routes, although they share the same name .. here is the model

/* models/cars.js */

import DS from "ember-data";

export default DS.Model.extend({
  make: DS.attr("string"),
  model: DS.attr("string"),
  year: DS.attr("string")
});

In Ember, when we want to make a new page that can be visited using a URL, we need to generate a "route" using Ember CLI .. here is the routes

/* routes/cars.js */

import Route from "@ember/routing/route";

export default Route.extend({
  model() {
    return this.store.findAll("car", {
      orderBy: "make"
    });
  }
});

/* routes/cars/edit.js */

import Route from '@ember/routing/route';

export default Route.extend({});

/* routes/cars/new.js */

import Route from "@ember/routing/route";

export default Route.extend({
  model() {
    return this.store.findAll("car");
  }
});

/* routes/users.js*/

import Route from "@ember/routing/route";
import $ from "jquery";

export default Route.extend({
  model: function() {
    var url = "https://api.github.com/users";
    return $.getJSON(url).then(function(data) {
      return data.splice(0, 10);
    });
  }
});

The EmberRouter class manages the application state and URLs .. here is the router

/* router.js */

import EmberRouter from "@ember/routing/router";
import config from "./config/environment";

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route("cars", function() {
    this.route("new");
    this.route("edit", { path: "/edit/:car_id" });
  });
  this.route("users");
});

export default Router;

A template is used to create a standard layout across multiple pages. When you change a template, the pages that are based on that template automatically get changed. Templates provide standardization controls.

<!-- templates/users.hbs -->

<h1>Github Users</h1>
<ul>
  {{#each model as |user|}}
    <li>{{user.login}}</li>
  {{/each}}
</ul>

<!-- templates/car.hbs -->

{{#link-to "cars.new"}}Create Car{{/link-to}}
<hr>
{{outlet}}
<h1>Cars</h1>
<ul>
  {{#each model as |car|}}
    <li>
      {{car.year}} {{car.make}} {{car.model}} -
      {{#link-to "cars.edit" car.id}}Edit{{/link-to}}
      <button {{action "deleteCar" car.id}}>Delete</button>
    </li>
  {{/each}}
</ul>

<!-- templates/application.hbs -->

{{outlet}}

<!-- templates/cars/new.hbs -->

<form {{action "addCar" on="submit"}}>
  <p>Make: {{input type="text" value=carMake}}</p>
  <p>Model: {{input type="text" value=carModel}}</p>
  <p>Year: {{input type="text" value=carYear}}</p>
  <p>{{input type="submit" value="submit"}}</p>
</form>

<!-- templates/cars/edit.hbs -->

<form {{action "editCar" model.id on="submit"}}>
  <p>Make: {{input type="text" value=model.make}}</p>
  <p>Model: {{input type="text" value=model.model}}</p>
  <p>Year: {{input type="text" value=model.year}}</p>
  <p>{{input type="submit" value="Submit"}}</p>
</form>

run

Uncaught TypeError: Cannot read property 'initializedRelationships' of 
undefined
https://i.sstatic.net/y7Ax0.png

here is my app drive link

Answer 1

if you are using ember-cli 3.12.0, when you are creating the firebase connection with your app by default "emberfire/adapters/firebase" will be imported automatical in adapters/application.js, which is not true.

`/* adapters/application.js */

import FirebaseAdapter from "emberfire/adapters/firebase";

export default FirebaseAdapter.extend({});`

go there and edit that import to "emberfire/adapters/firestore".

`import FirebaseAdapter from 'emberfire/adapters/firestore';

export default FirebaseAdapter.extend({

});`

and downgrade your "ember-source to : 3.10.0" in package.json

Answer 2

The error disappears when I remove the findAll query inside model hook. Probably this would be an error with firebase config.

You missed entering the below config. Make sure you have all these variables inside your app/config/environment.js

var ENV = {
  firebase: {
    apiKey: "your-api-key",
    authDomain: "YOUR-FIREBASE-APP.firebaseapp.com",
    databaseURL: "https://YOUR-FIREBASE-APP.firebaseio.com",
    projectId: "YOUR-FIREBASE-APP",
    storageBucket: "YOUR-FIREBASE-APP.appspot.com",
    messagingSenderId: "00000000000"
  }
}

My app works fine with firebase. Please do follow the step by step approach from here

You have installed both stable and latest build versions of emberfire,

"emberfire": "^2.0.10",
"emberfire-exp": "^3.0.0-rc.1-4",

Which is not necessary. Install any one version.