ember data findRecord return value is not the expected record

Question

I am just starting with Ember and picking up javascript again after few years. Have a basic question.

I have a login page - with login route and controller. I have setup an ember cli mirage endpoint to return applicantsinfo data, when calling GET /applicantsinfo/123

import Ember from 'ember';

 export default Ember.Controller.extend({
   applicantsinfoRecord: '',
   userName: '',
   password: '',
   actions: {
     submitAuthForm() {
     const userName = this.get('userName');
     const password = this.get('password');

     // call to mirage 
     this.get('store')
      .findRecord('applicantsinfo', userName)
      .then((applicantsInfoRecord) => {
        this.set('applicantsInfoRecord', applicantsInfoRecord);
        console.log('inside then function',applicantsInfoRecord);  
        this.transitionToRoute('form-edit');
      })
      .then((error) => {
        console.log('then error happened', error);
        this.set('submissionMessage', 'then(error): There was an error logging in with userName:', userName);
      })
      .catch((error) => {
        console.log('inside catch', error);
        this.set('submissionMessage', 'catch(error): There was an error logging in with userName:', userName);
      });
    }
  }
});

login.hbs is simple with username/password fields and submit button that calls the controller submitAuthForm() function

login.hbs

  <label>Card Number</label>
  {{input type="text" value=userName}}


<label>Password</label>
{{input type="text" value=password}}

<button class="primary-link" type="submit" {{action 'submitAuthForm'}}>
  Submit
</button>  

my problem is when the findRecord call returns the value in the then() block, it gives me an ember class

It should return me an actual applicantinfo record. that is returned by cli mirage

/app/mirage/config.js

this.get('/applicantsinfos/123', () => {
 return { applicantsinfo: { "id": 123, "sessionId": 3, "userName": 
 'Abc', "salary": '10110', "age": '1100', "password": 'password03' } }
 });

Basically I want to set this returned object applicantsinfo in controller property and then transition to the next page form-edit, where i will retrieve this property, using

this.controllerFor('login').get('applicantsinfo')

So essentially i have two questions, should i not get at that applicantsinfo record instead of ember _Class variable.

Also is this a correct approach to call for authentication first, if its successful, i will probably pass the sessionId from the return applicantsInfo record over to the next page, where in the route (in the model() function) , i can make another back-end call to pull additional customer profile based on the sessionId.

Please note that i am not asking how to write authentication functionality. This question can be generalized to a case - where first screen's controller makes a back-end call, retrieves a sessionId from the returned result, and then transitions to the next page, where the route for that page, makes another backend call based on the sessionId passed from previous page's controller.

Answer 1

the problem was somewhere else, the problem was my model class had its fields disabled, so the console.log(applicantsinfo.get('userName) statement (when i tried initially) kept on giving me undefined. now when i fixed my model to include the relevant fields it is actually giving me the value back.

For the sake of completeness, one should also make sure the returned value from ember-cli-mirage should have matching serializer selected as well in the app/mirage/serializers/application.js

For JSON API compliant responses, keep the default, JSONAPISerializer. For simple JSON responses, use the RestSerializer instead to avoid any issues.

Answer 2

Whenever you are dealing with records in Ember, you need to use getters to access the attributes themselves. It's normal to see some class gibberish in the console if you just log the record that was retrieved through Ember Data (using findRecord, findAll, etc).

Try console.log(applicantsInfoRecord.get('userName')) and see if you get what you expect.

For authentication, I think that could work. Some hand rolled auth usually involves login and logout routes and creating a user service. I had luck with Ember Simple Auth. It took me a while to set up but once it's going, it's awesome for handling state.