A possible future:
GraphQL and React ❤️ Drupal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60553/images/3987173/overlay.png)
Michael Schmid
CTO Amazee
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:
😮
😱
🤔
💡
www.gaultmillau.ch
www.beobachter.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
- 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)
Example
{
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
GraphQL Module
- Used in Production
- Comes 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
(ServerSide rendering)
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/3873000/Copy_of_RAS_Stack_-_Google_Drawings.png)
![](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 🚀
A possible future: GraphQL and React ❤️ Drupal - Drupal Business & Community Days Heidelberg
By Michael Schmid
A possible future: GraphQL and React ❤️ Drupal - Drupal Business & Community Days Heidelberg
- 1,846