A possible future:
GraphQL and React ❤️ Drupal
Michael Schmid - CTO
Brandon Williams - Developer
2013 - 2016
Amazee Labs ⚔️ Decoupled
October 2016:
Let's build 12 Websites with the same Backend
Amazee Labs:
😮
😱
🤔
💡
launched today:
www.gaultmillau.ch
React
Apollo
Redux
Drupal
GraphQL
Amazee Labs:
😍👌💪
- GraphQL
- GraphQL in Drupal
- React
- All together
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
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
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
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?
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,930