A possible future:
GraphQL and React ❤️ Drupal
Michael Schmid - CTO
Brandon Williams - Developer
2013 - 2016
Amazee Labs ⚔️ Decoupled
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3739319/_Headless_Drupal__-_The_Cake_is_a_Lie___Zensations.jpg)
October 2016:
Let's build 12 Websites with the same Backend
Amazee Labs:
😮
😱
🤔
💡
launched today:
www.gaultmillau.ch
React
Apollo
Redux
Drupal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3739369/apollo-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3739370/logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3739372/GraphQL_Logo.svg.png)
GraphQL
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3739382/drupal_8_logo_isolated_CMYK_72.png)
Amazee Labs:
😍👌💪
- GraphQL
- GraphQL in Drupal
- React
- All together
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3739424/og_image.png)
by Facebook
- started in 2012
- public in 2015
demo time
📽
Hint: SWAPI REST vs SWAPI GraphQL
GraphQL
- get exactly what you need
- multiple resources in one
- Fragments, Variables, etc.
- Any Schema possible
- Mutations
- Versionless
- Strongly Typed
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3741942/1_IvCDlfi3vQfgyKO1eFv4jA.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3741965/500px-Drupal-wordmark.svg.png)
Drupal GraphQL Module
- Full GraphQL support
I’ve been using GraphQL for <24 hours, AMA
ProNoobtips
Installation
- Use Composer
- 8.x-2.x — For quickly getting data, experimenting (not production)
- 8.x-3.x — For better developer experience and “future proof,” maintainable
- Learn GraphQL first (http://graphql.org/learn/)
- Use GraphiQL
- Comes with graphql module, access at /graphql/explorer
- ctrl+space is your best friend
Usage (Basic)
8.x-2.x
{
nodeQuery(title:"Test article") {
nid
status
renderedOutput
uid {
entity {
uid
name
}
}
}
}
{
"data": {
"nodeQuery": [{
"nid": 1,
"title": "Test article",
"status": true,
"renderedOutput": "<article class=\"node node--type-article..."
"uid": {
"entity": {
"uid": 1,
"name": "admin"
}
}
}]
}
}
8.x-3.x
{
root {
nodeById(id:1) {
entityId
entityType {
Label
}
}
}
}
{
"data": {
"root": {
"nodeById": {
"entityId": "1",
"entityType": {
"label": "Content"
}
}
}
}
}
Usage (Advanced, 8.x-3.x)
- Write a custom module to expose custom schema
- OOP architecture
- Look at the example module included with GraphQL
- Look at the graphql_demo module in https://github.com/fubhy/drupal-decoupled-app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3742020/Drupalcon_Baltimore_-_Drupal__GraphQL__React_-_Google_Slides.jpg)
I’ve been using GraphQL for <24 hours, and I have a functioning Drupal, GraphQL, React app!
GraphQL Module
- Used in Production
- Will come with default schema
- You can bring own schema
- Content and Config Entities
- Full Drupal Cache & Cache Tag support
- Mutations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3742044/React_logo_wordmark.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3742046/logo-title-dark.png)
React: Frontend Library
Apollo: GraphQL Client
Redux: Predictable state container
SEO! Accessibility!
Isomorphic Javascript
- Browser requests first page
- Nodejs on Serverside renders the Page with API requests
- Sends HTML over to Browser
- Browser morphs into full JS App
- Requests go to API directly
demo time
📽
Hint: prod site isomorphic
Performance!
Multiple Requests in one
- React, Apollo and Redux keep internal cache of everything
- GraphQL has multiple Resources in one Request
demo time
📽
Hint: prod site map & footer
Hosting?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3742125/DrupalCamp_Munich_2016_-_Decoupled_Drupal__Yeah__But_How___-_Google_Slides.jpg)
and now
all together
everything you need
https://github.com/fubhy/drupal-decoupled-app
demo time
📽
Hint: local decoupled app
Résumé
- High initial investment
- Amazee Labs committed to OpenSource everything
- Developers ❤️
- Clients ❤️
- Very excited about the future 🚀
deck
By Michael Schmid
deck
- 1,850