Skip to content

Instantly share code, notes, and snippets.

@multpix
Last active June 22, 2017 20:05
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save multpix/5b82936963ef6b9904239b3b75353166 to your computer and use it in GitHub Desktop.
Save multpix/5b82936963ef6b9904239b3b75353166 to your computer and use it in GitHub Desktop.
Ember adapter and serializer for Drupal 8 with jsonapi
// app/adapters/application.js
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
host: 'http://0.0.0.0:8888',
namespace: 'api',
buildURL(record, suffix) {
return this._super(record, suffix) + '?_format=api_json';
},
pathForType(type) {
return type.replace('--', '/').replace('-', '_');
}
});
// app/serializers/application.js
import Ember from 'ember';
import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
modelNameFromPayloadKey(key) {
return Ember.String.dasherize(key);
},
keyForAttribute(attr) {
return Ember.String.underscore(attr);
}
});
// app/models/node--article.js
import DS from 'ember-data';
export default DS.Model.extend({
nid: DS.attr(),
uuid: DS.attr(),
title: DS.attr(),
created: DS.attr(),
body: DS.attr(),
fieldComments: DS.attr(),
uid: DS.belongsTo('user--user')
});
# https://www.drupal.org/project/jsonapi
# jsonapi.resource_info.yml
prefix: api
schema_prefix: schema
id_field: uuid
// GET http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366?_format=api_json
{
"data":
{
"type": "node--article",
"id": "49d66a62-9130-4470-a794-1a52a3517366",
"attributes":
{
"nid": "1",
"uuid": "49d66a62-9130-4470-a794-1a52a3517366",
"vid": "51",
"langcode": "en",
"title": "Ea Eum Hendrerit Tego",
"status": "1",
"created": "1476337754",
"changed": "1476977124",
"promote": "1",
"sticky": "0",
"revision_timestamp": "1476977124",
"revision_log": null,
"revision_translation_affected": "1",
"default_langcode": "1",
"body":
{
"value": "Enim scisco vicis. Abdo capto tamen vero. Caecus dignissim interdico jumentum oppeto sit usitas utinam voco ymo. Blandit meus nimis nobis nutus odio tego ulciscor valde. Dignissim importunus iustum tego verto virtus.",
"format": "plain_text",
"summary": "Enim scisco vicis. Abdo capto tamen vero. Caecus dignissim interdico jumentum oppeto sit usitas utinam voco ymo. Blandit meus nimis nobis nutus odio tego ulciscor valde. Dignissim importunus iustum tego verto virtus."
},
"field_comments":
{
"status": "2",
"cid": "368",
"last_comment_timestamp": "1476977150",
"last_comment_name": "",
"last_comment_uid": "1",
"comment_count": "1"
}
},
"relationships":
{
"type":
{
"data":
{
"type": "node_type--node_type",
"id": "57421fee-bee2-49e2-beee-99792a6f41d3"
},
"links":
{
"self": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366/relationships/type?_format=api_json",
"related": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366/type?_format=api_json"
}
},
"uid":
{
"data":
{
"type": "user--user",
"id": "6e95b823-4353-4986-854b-143254b6d528"
},
"links":
{
"self": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366/relationships/uid?_format=api_json",
"related": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366/uid?_format=api_json"
}
},
"revision_uid":
{
"data":
{
"type": "user--user",
"id": "17046644-5da6-4a15-84bc-e415cb27f452"
},
"links":
{
"self": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366/relationships/revision_uid?_format=api_json",
"related": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366/revision_uid?_format=api_json"
}
},
"field_images":
{
"data":
[
{
"type": "file--file",
"id": "f88d1bfc-04a5-4e7e-b836-7d92bbc80c87"
},
{
"type": "file--file",
"id": "2d8d097f-66ba-4f81-92ba-cf3d2b5140b7"
},
{
"type": "file--file",
"id": "e2cd5f09-be15-426b-bde2-bb075bcb2fc7"
}
],
"links":
{
"self": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366/relationships/field_images?_format=api_json",
"related": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366/field_images?_format=api_json"
}
},
"field_terms":
{
"data":
[
{
"type": "taxonomy_term--terms",
"id": "70ada5b4-fe97-4988-ab7d-c4dce4613e7c"
},
{
"type": "taxonomy_term--terms",
"id": "41c08747-597c-4fd4-aba7-330264c53db3"
},
{
"type": "taxonomy_term--terms",
"id": "975fa7b4-0b5c-4b54-a6f1-f0f4f05355fe"
}
],
"links":
{
"self": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366/relationships/field_terms?_format=api_json",
"related": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366/field_terms?_format=api_json"
}
}
},
"links":
{
"self": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366?_format=api_json"
}
},
"links":
{
"self": "http://0.0.0.0:8888/api/node/article/49d66a62-9130-4470-a794-1a52a3517366?_format=api_json&q=api/node/article/49d66a62-9130-4470-a794-1a52a3517366"
}
}
@multpix
Copy link
Author

multpix commented Oct 20, 2016

Client-side framework Ember.js perfectly works with Drupal 8 backend.

ember2drupal
Ember
A framework for creating ambitious web applications.

Drupal
Launch, manage, and scale ambitious digital experiences - with the flexibility to build great websites or push beyond the browser.

JSON API
A specification for building apis in json.

Use JSON API drupal module.

Proudly open source.

See and read more:
http://buytaert.net/should-we-decouple-drupal-with-a-client-side-framework
http://buytaert.net/selecting-a-client-side-framework-for-drupal
http://buytaert.net/can-drupal-outdo-native-applications
https://www.youtube.com/watch?v=qiY8H6UWDm0
https://www.youtube.com/watch?v=O12qBp1lWUc

@bmx269
Copy link

bmx269 commented Nov 27, 2016

This is great, do you have any authentication against Drupal 8 techniques? I have looked here: https://github.com/simplabs/ember-simple-auth but it is missing some Drupal details.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment