EMBER JS - Fetch associated model data from back-end only when required - ember.js

Question

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

Answer 1

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.