1
store.findRecord('school', school_id, {
                 include: [
                  'students',
                  'students.records'
                 ].join(',')

Using the above code fetching school, students, students' records data in inital load. In the initial load, I don't need students.records (only listing students initially)

Need student records only when clicking some button (All Students Performance - to display a performance chart) Is there any way to fetch associated records separately and link with the existing model

I have sperate api endpoint for fetch students' records

nagasundaram I
  • 139
  • 1
  • 3

1 Answers1

0

emphasized textyou could use a nested route? maybe something like:

// router.js
Router.map(function() {
  // ...
  this.route('school', { path: ':school_id' }, function() {
    this.route('performance');
  });
  // ...
})

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

export default class extends Route {
  async model(params) {
    const { school_id } = params;

    const school = await store.findRecord(
      'school', school_id, { include: 'students' }
    );

    return { school }          
  }
}

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

export default class extends Route {
  async model() {
     // get the id from the parent route
    const { school_id } this.paramsFor('school');

    const school = await store.findRecord(
      'school', school_id, { include: 'students.records' }
    );
    // depending if the relationship is async or not, students
    // will need to be awaited
    const students = await school.students;

    return { students }          
  }
}

This is all using the same schools endpoint. If you want to fetch only the student's records, without hitting the school's endpoint, that depends on your API's capabilities.

if you wanted to fetch a singular student's records you'd probably want to have a sub-route for the student, and do something like this:

// router.js
Router.map(function() {
  // ...
  this.route('school', { path: ':school_id' }, function() {
    this.route('performance');
    this.route('students', function() {
      this.route('student', { path: ':student_id' });
    });
  });
  // ...
})

and you'd link to that route like this:

{{#link-to 'school.students.student' school_id student_id}}
  Student Name
{{/link-to}}

and in your student route, you'd want to construct your model hook like this:

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

export default class extends Route {
  async model(params) {
     // get the id from the parent route
    const { school_id } this.paramsFor('school');
    const { student_id } = params;

    const student = await store.findRecord(
      'student', student_id, { include: 'records' }
    );

    // depending if the relationship is async or not, students
    // will need to be awaited
    const records = await student.records;

    return { student, records };     
  }
}

You may want to open another question about your API if you're uncertain how to interact with it. There we could explore how it is structured, like if it's a http://jsonapi.org/ API or a non-standard rest api.

hope this helps.

NullVoxPopuli
  • 61,906
  • 73
  • 206
  • 352
  • thanks, `NullVoxPopuli` I tried this way and as you mentioned without hitting the school's endpoint how to get the student's records If I fetch student's records separately how to sideload/link with existing data(students and school) or what kind of changes I have to do in API endpoints? – nagasundaram I Oct 10 '18 at 12:00
  • @nagasundaramI I've updated my answer to hopefully address that? lemme know if it doesn't :) – NullVoxPopuli Oct 10 '18 at 12:13
  • thank you so much but slightly my requirement is different Actually, I want to fetch all students' records in records route(To show overall performance to the admin) – nagasundaram I Oct 10 '18 at 12:23
  • Wouldn't that be the first one, then? Maybe I'm confused – NullVoxPopuli Oct 10 '18 at 12:38
  • sorry for the confusion the first solution that you gave is fine but there again have to fetch school than students.records instead I want to fetch all students' records seperatly then sideload with school and students All this to avoid the initial load – nagasundaram I Oct 10 '18 at 13:12
  • ```store.findRecord('school', school_id, { include: [ 'students', 'students.records' ].join(',')``` it will take too much of time in the initial load instead I want to fetch only ```store.findRecord('school', school_id, { include: [ 'students'].join(',')})``` after a transition to the performance route I want to query all students records separately(without using school endpoint) and sideload with school and students(already available in ember-data) – nagasundaram I Oct 10 '18 at 13:13
  • and also help on how to modify the API endpoint for this situation if possible. Thank so for the detailed responses – nagasundaram I Oct 10 '18 at 13:18
  • what part of things is taking too long? maybe it'd be beneficial to open a new question for the API side of things? is this a jsonapi.org api? or an api that just uses json? (things to include in the new question, feel free to tag me in a comment when you make that). once we know what api calls can be done, and how the responses are formatted, we'd be able to come back here and see how to make the call with ember-data – NullVoxPopuli Oct 10 '18 at 13:59
  • Thank you @NullVoxPopuli Please find the question regarding API here https://stackoverflow.com/questions/52751907/api-formation-for-side-loading-only-required-associated-data-to-ember-data – nagasundaram I Oct 11 '18 at 03:53