Decoupled Drupal com GraphQL e React
1 gostou171 visualizações
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.
Decoupled Drupal com GraphQL e React
- 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 é?
- 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?
- 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
- 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