A possible future:

GraphQL and React ❤️ Drupal

Michael Schmid

CTO Amazee

2013 - 2016

Amazee Labs ⚔️ Decoupled

October 2016:

Let's build 12 Websites with the same Backend

Amazee Labs:

😮

😱

🤔

💡

www.gaultmillau.ch
www.beobachter.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
  • 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

React:      Frontend Library

Apollo:    GraphQL Client 

Redux:     Predictable state container

SEO! Accessibility!

Isomorphic Javascript

  1. Browser requests first page
  2. Nodejs on Serverside renders the Page with API requests
  3. Sends HTML over to Browser
  4. Browser morphs into full JS App
  5. 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?

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,765