Ember Data: Models, Store & Relationships

Ember Data is the official data persistence library for Ember.js applications -- providing a structured, ORM-like way to model, fetch, cache, and save data from a backend API, deeply integrated with Ember's component/routing architecture.

Defining a Model

import Model, { attr, belongsTo, hasMany } from '@ember-data/model'

export default class UserModel extends Model {
  @attr('string') firstName;
  @attr('string') lastName;
  @attr('string') email;

  // Converts a raw ISO date string into an actual Date object
  @attr('date') createdAt;

  @hasMany('post') posts;
}

export default class PostModel extends Model {
  @attr('string') title;

  // Mirrors a foreign key relationship -- post.author retrieves
  // the related User record
  @belongsTo('author') author;
}

The Store: Central Data Coordination

import Route from '@ember/routing/route'
import { service } from '@ember/service'

export default class UserRoute extends Route {
  @service store;

  async model(params) {
    // Checks cache first; makes a network request only if not
    // already cached (or a reload is otherwise needed)
    return this.store.findRecord('user', params.id);
  }
}

// peekRecord() ONLY checks the local cache -- returns null
// immediately if not present, never triggers a network request
const cachedUser = this.store.peekRecord('user', 5);

// query() fetches a filtered/parameterized collection
const publishedPosts = await this.store.query('post', {
  author: 'alice',
  status: 'published',
});

Async Relationships

{{! post.author returns a promise-like object -- if not already
    cached, accessing it triggers a background fetch }}
{{this.post.author.firstName}}