Formation Ember - Backend

• json server n’implémente pas la norme JSON API mais respecte en grande partie les conventions du [RESTAdapter][ember-data-rest-adapter]

• Changer l’hôte pour http://localhost:3000

  // app/adapters/application.js
  
  import DS from 'ember-data';
  
  export default DS.RESTAdapter.extend({
    host: 'http://localhost:3000'
  });
  

• Lorsqu’on accède à l’application, on constate que celle-ci n’affiche pas les comics et que la console affiche les warnings suivants :

  WARNING: Encountered "0" in payload, but no model was found for model name "0" (resolved model name using ember-training@serializer:-rest:.modelNameFromPayloadKey("0"))
  WARNING: Encountered "1" in payload, but no model was found for model name "1" (resolved model name using ember-training@serializer:-rest:.modelNameFromPayloadKey("1"))
  WARNING: Encountered "2" in payload, but no model was found for model name "2" (resolved model name using ember-training@serializer:-rest:.modelNameFromPayloadKey("2"))
  

  En effet, le serveur renvoie les comics directement dans un tableau JSON :

  [
    {
      "id": 1,
      "title": "Blacksad",
      ...
    },
    {
      "id": 2,
      "title": "Calvin and Hobbes",
      ...
    },
    {
      "id": 3,
      "title": "Akira",
      ...
    }
  ]
  

  alors que le [RESTAdapter][ember-data-rest-adapter] s’attend à ce que le résultat soit encapsulé dans un hash comics :

  {
    "comics": [
      {
        "id": 1,
        "title": "Blacksad",
        ...
      },
      {
        "id": 2,
        "title": "Calvin and Hobbes",
        ...
      },
      {
        "id": 3,
        "title": "Akira",
        ...
      }
    ]
  }
  

• Trouver la méthode normalize* qui convient et l’étendre pour encapsuler le résultat dans un hash correspondant au type requêté.

• Cette méthode doit fonctionner pour tous les modèles (pas seulement pour comics)

  // app/serializers/application.js
  
  import DS from 'ember-data';
  
  export default DS.RESTSerializer.extend({
  
    normalizeArrayResponse(store, primaryModelClass, hash, id, requestType) {
      const newHash = {};
      newHash[primaryModelClass.modelName] = hash;
      return this._super(store, primaryModelClass, newHash, id, requestType);
    }
  });
  

Effectuer le même genre d’opération pour que l’application comprenne la réponse lors de l’accès à http://localhost:4200/comics/blacksad puisque, là aussi, l’application est en erreur

// app/serializers/application.js

import DS from 'ember-data';

export default DS.RESTSerializer.extend({

  normalizeArrayResponse(store, primaryModelClass, hash, id, requestType) {
    ...
  },

  normalizeSingleResponse(store, primaryModelClass, hash, id, requestType) {
    const newHash = {};
    newHash[primaryModelClass.modelName] = hash;
    return this._super(store, primaryModelClass, newHash, id, requestType);
  }
});

• Modifier la configuration pour que l’application récupère les albums en une seule requête en utilisant l’une des propriétés du [RESTAdapter][ember-data-rest-adapter].

  // app/adapters/application.js
  
  import DS from 'ember-data';
  
  export default DS.RESTAdapter.extend({
    host: 'http://localhost:3000',
    coalesceFindRequests: true
  });
  

  On constate que la récupération des albums se fait désormais via une seule requête http://localhost:3000/albums?ids[]=1&ids[]=2&ids[]=3&ids[]=4&ids[]=5

• Pour cela, il est nécessaire de passer le paramètre de requête _embed=albums au serveur. Soit http://localhost:3000/comics?slug=blacksad&_embed=albums
• Configurer l’application pour faire en sorte qu’[Ember Data][ember-data] ajoute ce paramètre à la requête, dans le cas spécifique du model comic.
• Attention à étendre les bons objets de manière à continuer à bénéficier des personnalisations précédentes
• Configurer l’application pour qu’[Ember Data][ember-data] récupère les albums comme des relations embarquées du modèle comic

• Attention ! On souhaite récupérer les albums embarqués mais n’envoyer au serveur des identifiants lors d’une modification. En effet, dans le cas contraire, les albums seraient définitivement enregistrés dans le json du comic lui-même, ce que l’on ne souhaite pas.

  // app/adapters/comic.js
  
  import BaseAdapter from './application'
  
  export default BaseAdapter.extend({
  
    urlForQueryRecord(query, modelName) {
      return this._buildURL(modelName) + "?_embed=albums";
    }
  });
  

  // app/serializers/comic.js
  
  import DS from 'ember-data';
  import BaseSerializer from './application';
  
  export default BaseSerializer.extend(DS.EmbeddedRecordsMixin, {
    attrs: {
      albums: {
        serialize: 'ids',
        deserialize: 'records'
      }
    }
  });
  
  

  Si l’on avait utilisé la notation embedded: always, les albums auraient aussi été inclus entièrement dans la requête de modification.

Retourner à la racine de l’application http://localhost:4200/comics puis sélectionner blacksad

On constate que les albums ne sont plus chargés. En effet, on a indiqué grâce à la méthode urlForQueryRecord que l’on souhaitait les embarquer lors d’une requête unitaire. Or, lorsqu’on passe par la route comics, on utilise la méthode findAll. Lorsque l’on sélectionne ensuite un comic, [Ember Data][ember-data] détecte que l’on a déjà chargé le modèle, n’éxécute pas le hook model ni la méthode queryRecord. Or la méthode findAll n’appelle pas la méthode serveur qui embarque les albums.

• Modifier l’adapter pour embarquer aussi les albums lors d’un findAll

  import BaseAdapter from './application';
  
  export default BaseAdapter.extend({
  
    urlForQueryRecord(query, modelName) {
      return this._buildURL(modelName) + "?_embed=albums";
    },
  
    urlForFindAll(modelName, snapshot) {
      return this._buildURL(modelName) + "?_embed=albums";
    }
  });
  

Enfin, un dernier warning doit apparaître dû au fait que la méthode [Ember Data][ember-data] queryRecord attend un objet en réponse et non un tableau d’un seul élément, comme renvoyé par la nouvelle API.

On pourrait aisément modifier le hook model de la route comic pour traiter “manuellement ce cas” :

// app/routes/comic.js

...

  model (params) {
    return this.store.query('comic', {slug: params.comic_slug}).then(comics => comics.get('firstObject'));
  },

...
     

Cependant, cette approche introduirait dans le code même de l’application une dépendance au format spécifique et non standard de l’API backend et nous obligerait en outre à effectuer ce traitement chaque fois que l’on récupère un comic seul dans toute notre application. Il est donc plus judicieux d’effectuer cette opération une fois pour toute au niveau des serializers.

• Modifier le serializer correspondant pour transformer la réponse reçue dans le cas d’un comic seul

  // app/serializers/comic.js 
  
  import DS from 'ember-data';
  import BaseSerializer from './application';
  import {isEmberArray as isArray } from 'ember-array/utils';
  
  export default BaseSerializer.extend(DS.EmbeddedRecordsMixin, {
    attrs: {
      ...
    },
  
    normalizeSingleResponse(store, primaryModelClass, hash, id, requestType) {
      let newHash = hash;
      if (hash && isArray(hash)) {
        newHash = hash[0];
      } 
      return this._super(store, primaryModelClass, newHash, id, requestType);
    }
  });