#midcamp
Getting Your Content Where You Need It with JSON API /
Chris Hamper
Chris Hamper
Labs Engineer
langcode: en
status: true
dependencies:
module:
- basic_auth
- node
- serialization
id: entity.node
plugin_id: 'entity:node'
granularity: method
configuration:
GET:
supported_formats:
- json
supported_auth:
- basic_auth
To get all information for an Article node:
GET /node/1
GET /user/123
GET /taxonomy/term/40
GET /taxonomy/term/41
GET /taxonomy/term/42
/article
/article/1
/article/1/author
GET /article/1 HTTP/1.1
Accept: application/vnd.api+json
{
"data": {
"type": "article",
"id": "1",
"attributes": {
"title": "Example JSON API Response",
"body": "Lorem ipsum dolor sit amet..."
},
"relationships": {
"author": {
"data": { "type": "person", "id": "9" }
}
}
}
}
Follow RESTful API conventions:
POST
→ Create new resource GET
→ Retrieve resource(s) PATCH
→ Update resourceDELETE
→ Delete resourceOnly GET
can involve multiple resources
POST /article HTTP/1.1
Accept: application/vnd.api+json
{
"data": {
"type": "article",
"attributes": {
"title": "New Article"
"body": "Wow! JSON API rocks!"
}
"relationships": {
"author": {
"data": { "type": "person", "id": "42" }
}
}
}
}
PATCH /article/1 HTTP/1.1
Accept: application/vnd.api+json
{
"data": {
"type": "article",
"id": "1",
"attributes": {
"title": "The New Title!"
}
}
Caveat: implementation details are left up to the server
GET /article?sort[sort-title][path]=title HTTP/1.1
Accept: application/vnd.api+json
GET /article?sort[sort-title][path]=title&
sort[sort-title][direction]=DESC HTTP/1.1
Accept: application/vnd.api+json
GET /article?filter[uid][value]=42 HTTP/1.1
Accept: application/vnd.api+json
GET /article?filter[by-created][condition][path]=created
&filter[by-created][condition][value]=2015-10-10
&filter[by-created][condition][operator]=<
GET /article?page[offset]=20
&page[limit]=10
Drupal has the "JSON API" module
Ember.js is built to use JSON API by default
Wordpress has plugins
Libraries for Java and Android, iOS
composer require "drupal/jsonapi:^1.0"
drush en -y jsonapi
# Add to sites/default/services.yml
cors.config:
enabled: true
# Specify allowed headers, like 'x-allowed-header'.
allowedHeaders: ['Content-Type', 'Access-Control-Allow-Headers', 'Authorization', 'X-Requested-With', 'X-CSRF-Token']
# Specify allowed request methods, specify ['*'] to allow all possible ones.
allowedMethods: ['POST', 'GET', 'OPTIONS', 'PATCH', 'DELETE']
# Configure requests allowed from specific origins. Ideally this should not be '*', but rather a list of specific hosts.
allowedOrigins: ['*']
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: true
# Sets the Access-Control-Max-Age header.
maxAge: false
# Sets the Access-Control-Allow-Credentials header.
supportsCredentials: true
ember init
ember install ember-data-drupal
// app/adapters/application.js
import DrupalJSONAPIAdapter from 'ember-data-drupal/adapter';
export default DrupalJSONAPIAdapter.extend({
host: 'http://www.yourbackendsite.com',
namespace: 'jsonapi'
});
// app/serializers/application.js
import DrupalJSONAPISerializer from 'ember-data-drupal/serializer';
export default DrupalJSONAPISerializer.extend();
// config/environment.js
var ENV = {
...
drupalEntityModels: {
"article": {},
}
}
// app/models/article.js
import DS from 'ember-data';
export default DS.Model.extend({
uuid: DS.attr(),
title: DS.attr(),
body: DS.attr()
});
// app/routes/article.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.get('store').findRecord('article', params.uuid);
}
});
Slides and example code available on GitHub
https://chris-hamper.github.io/getting-your-content-json-api/
https://github.com/chris-hamper/drupal-ember-jsonapi-demo
drupal.org/u/hampercm
@hampercm
chris.hamper@acquia.com