Este documento apresenta como implementar GraphQL com Drupal 8 e React usando Apollo. Primeiro explica o que é GraphQL e como resolve problemas do REST. Em seguida, mostra como implementar GraphQL no Drupal usando um módulo e como usar React e Apollo para construir interfaces com GraphQL. Por fim, demonstra uma arquitetura integrando essas tecnologias no front-end e back-end.

1. Drupal 8
Decoupled com GraphQL e React
Cleber Gasparoto • Full Stack Developer • chgasparoto@gmail.com

2. Cleber Gasparoto • Full Stack Developer • chgasparoto@gmail.com
Cleber Gasparoto
Full Stack Developer na CI&T
● Web developer há 8 anos
● PHP, CodeIgniter, Laravel, jQuery
● Drupaleiro há 2 anos e meio
● 4 projetos internacionais e 1 nacional
● Full Stack há 2 meses
● @clebergasparoto | https://drupal.org/u/chgasparoto

3. Empresa global, presente
no Brasil, EUA, Europa,
Japão e China.
Referência Drupal, com
centenas de contribuições
na comunidade.
CI&T - Colabore, Inove, Transforme • http://ciandt.com • https://drupal.org/cit

4. Tópicos
● GraphQL
● GraphQL e Drupal
● React + Apollo
● Tudo junto

5. GraphQL

6. ● Resolve dois problemas do mundo REST
● Over Fetching (sobrecarga) de dados
● Under Fetching (falta) de dados
● Faz todo o processamento em apenas
uma requisição
Porque existe?

7. REST
URL Método Operação
/<name> POST Cria um registro
/<name> GET Obtém todos os registros
/<name>/:id GET Obtém o registro com o id fornecido
/<name>/:id PUT/PATCH Atualiza o registro com o id fornecido
/<name>/:id DELETE Deleta o registro com o id fornecido

9. ● O GraphQL é uma linguagem de consulta
a dados para API's desenvolvida e usada
pelo Facebook desde 2012.
● Em Julho de 2015 se tornou Open
Source, portanto é uma tecnologia
relativamente muito recente, mas
também muito poderosa.
O que é?

11. Grafos
User
User
Post
Followers
Post

13. http://graphql.org/users/

14. ● Schema
● Tipos de Dados (Fortemente tipado)
● Validação dos dados
● Sabe exatamente o que pode ser
requisitado
● Entrega "somente" o que foi requisitado
● Versionless
Como funciona?

15. http://graphql.org/

16. Schema

17. Gerando um Schema com PHP
https://github.com/Youshido/GraphQL/blob/ma
ster/examples/02_blog/Schema/BlogSchema.
php

18. Gerando um Schema com Node e Express
https://github.com/StephenGrider/Lyrical-Grap
hQL/blob/master/server/schema/root_query_ty
pe.js

19. Drupal

20. composer require drupal/graphql
OU
https://www.drupal.org/project/graphql
Instalação

21. Como usar?
Básico
● Primeiro aprenda GraphQL (http://graphql.org/learn) (https://www.howtographql.com)
● Use o GraphiQL
○ Vem junto com o módulo, acesso através de /graphql/explorer
○ Ctrl+space é o seu melhor amigo, sério!

22. Como usar?
Avançado
● Implementar um módulo customizado
● Utilizando Plugin API e Plugin Annotations do Drupal
● Tirar como exemplo o módulo graphql_core
● Exemplo: https://www.amazeelabs.com/en/blog/extending-graphql-part1-fields
● Exemplo: https://www.amazeelabs.com/en/blog/extending-graphql-part-2

24. Demonstração

26. React + Apollo

27. React
● Uma biblioteca JavaScript para construir interfaces de
usuário.
● Baseado em componentes.
● Componente é escrito em Javascript ao invés de
templates, assim fica fácil passar os dados através da sua
aplicação e manter o estado fora do DOM.

28. Apollo
● Apollo provê uma API GraphQL universal em cima de um
serviço, sendo possível construir novas funcionalidades
rapidamente sem esperar pelo backend.
● Queries, caching, mutations, optimistic UI, subscriptions,
pagination, server-side rendering, prefetching, e mais.

31. Tudo Junto

32. Arquitetura
React
Apollo
DrupalGraphQL
Front-end Back-end

33. Demonstração

35. Perguntas?

36. Referências
● http://graphql.org/
● https://www.howtographql.com/
● https://github.com/drupal-graphql/graphql
● https://reactjs.org/
● https://www.apollographql.com/
● https://www.amazeelabs.com/en/blog/drupal-graphql-react-apollo

37. Obrigado!
chgasparoto@gmail.com | @clebergasparoto | https://drupal.org/u/chgasparoto