GraphQl, Front queries made easy

How to deal with graphql on client-side

Transcript

1. GraphQl. Front-end queries made easy.
2. Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld
3. Conheça minha história. Onde tudo começou…
5. Objetivo. Onde eu quero chegar…
7. Vamos contextualizar. Como chegamos até aqui?
8. ZONA DARK SOAP REST #TRISTEZA #SEMCROSSFIT
9. "Analisarmos alternativas, como o REST. (…) Ficamos frustrados com as diferenças entre os dados que queríamos e as requests que eram necessárias para obtê-los.” Lee Byron
10. 2012. GraphQl é criado pelo Facebook apenas para uso interno.
11. 2015. É liberado como open source!
12. Que rolê é esse?
13. Duas partes. Consumir no front-end e fazer no back-end. *dar uma olhada nos conceitos antes.
14. GraphQl Server Data Sources Clients JSON bonitão lindão GraphQl Queries Resolvers
16. REST tem vários endpoints em que cada um retorna dados fixos. GraphQl tem um único endpoint que retorna uma estrutura flexível.
17. REST GET - /users/:id { “name”: “Igor Halfeld”, “email”: “igor@igor.com”, “state”: “RJ" } GraphQl POST - /graphql { “data”: { “name”: “Igor Halfeld” } } { query { Users (id: “666") { name } } }
18. 3 pilares. Query, Mutation, Subscription.
19. REST GET GraphQl POST PUT DELETE Query Mutations
20. { query { users { name, email } } } { query { users (id: “666”) { name, email }
 } } GET - /users/:id GET - /users
21. { mutation { createUser ( name: "Igor Luiz”, email: “luiz@luiz.com" ) { name, email } } } CREATE - /users { mutation { updateUser ( name: “Halfeld Igor” ) { name, email } } } PUT - /users/:id
22. { mutation { deleteUser (id: “666”) { name, email } } } DELETE - /users
24. O que muda no front é… Basicamente, saber fazer GraphQl SDL.
25. type Users { name: String! email: String! skills: [String]! addresses: [Address] } type Address { street: String, number: Number } GraphQl SDL (Schema Definition Language)
26. { Query { users (id: “666”) { name, height (unit: METERS) } } } Resolvers <3
27. { Query { users { admin (role: ADMIN) { …userFields } accountants (role: ACCOUNTANT) { …userFields } } } } fragment userFields on User { user, name } Fragments
28. { Query { users ($id: ID) { name, email } } } { id: “666" } Variables
29. Client de GraphQl. Se é tudo POST, eu posso usar o axios, certo?
30. Sim, mas não! Você precisa! Justamente para aproveitar melhor os benefícios do graphql.
32. Certeza que vai fazer a query de forma certa. Cache built-it: performance. Consistência na UI: Cache reativo.
36. Como tamo agora?
40. Tooling. Ferramental daóra.
43. GraphQl faker.
44. GraphQl Voyager.
45. DEMO TIME!
46. bit.ly/demo-floripa
47. Obrigado! igorluiz.me/talks - @IgorHalfeld