Graphql - ServerSide SP

Transcript

1. ANA LUIZA BASTOS github.com/anabastos @naluhh @anapbastos Software Developer na Quanto e cientista da computação da PUC-SP anabastos.me
2. JSLADIES fb.com/jsladiesbr twitter.com/jsladiessp meetup.com/JsLadies-BR/ LAMBDA.IO t.me/lambdastudygroup github.com/lambda-study-group/ meetup.com/Lambda-I-O-Sampa- Meetup/
3. GRAPHQL Construindo API's flexíveis e realtime com
4. VAMOS FALAR SOBRE REST
5. O QUE UMA RESTFULL API?
6. Representational State Transfer
7. Cliente Servidor HTTP URI
8. REQUISIÇÃO Cabeçalho Corpo RESPOSTA Cabeçalho Corpo
9. GET POST PUT DELETE PATCH HEAD TRACE OPTIONS
10. Songs Followers 1.239 Jovelli How I Feel Ana Luiza Lorem Ipsum
11. HTTP GET Songs Followers Ana Luiza Lorem Ipsum users/123 RESPONSE a { name: .., accountName: .., nickname: Ana Luiza, email: {..}, bio: Lorem Ipsum avatar: {..}, birthday: .., city: .., location: {..} ... }
12. HTTP GET Songs Followers Ana Luiza Lorem Ipsum users/123/posts RESPONSE posts { { id: .. music: {..}, replies: {..}, likes: {..}, shares: {..}, … }, ... } Jovelli How I Feel
13. HTTP GET users/123/followers RESPONSE followers { { name: .., accountName: .., Nickname: Vilmar, email: {..}, avantar: .. … }, ... } Songs 1.239 Jovelli How I Feel Ana Luiza Lorem Ipsum Followers
14. Followers 1.239 Jovelli How I Feel
15. FACEBOOK
16. “Ficamos frustrados com as diferenças entre os dados que queríamos e as requisições que eram necessárias para obtê-los” Lee Byron
17. ENDPOINTS ENDPOINTS ENDPOINTS
18. OVERFETCHING
19. UNDERFETCHING
20. O QUE É GRAPHQL?
21. QUERY LANGUAGE
22. FACILITAR A CONSULTA DE DADOS
23. GRAPHQL desenvolvida em 2012 no FACEBOOK
24. OPEN SOURCE em 2015
25. JAVASCRIPT PYTHON RUBY CLOJURE PHP JAVA C# GO SCALA ERLANG ELIXIR
27. POST endpoint graphql/
28. CORPO DA REQUEST { Os dados explícitos do que eu quero :) } POST endpoint graphql/
29. “EDGE”
30. QUERIES MUTATIONS SUBSCRIPTIONS
31. HTTP POST graphql/ RESPONSE data { userName: .., avatar: .., bio, followers [ {avatar: ..}, .. ] posts [ {artist: …, name:} ] } BODY query getUser { userName avatar bio followers(first: 3) { avatar } posts { artist name }
32. CORE CONCEPTS
33. TYPE SYSTEM QUERY LANGUAGE SCHEMA
34. QUERY LANGUAGE
35. QUERIES
36. RESPONSE [ { ‘name’: “ABBA”, }, { ‘name’: “Amy Winehouse” , }, { ‘name’: “Ana Carolina” , } ... ] CORPO query getArtists { artists { name } }
37. HIERÁRQUICO
38. RESPONSE { name: “Charlie Brown Jr.” albums: { { title: “Preço Curto Prazo Longo”, release_year: 1999 tracks { { title: “União” },{ title: “Te levar” }, .. } } } REQUEST query getArtists { artists { name albums { title release_year tracks { title } } } }
39. ARGUMENTOS
40. RESPONSE { name: “Carolina de Oliveira Lourenço”, Bio: “Cantora e Compositora Brasileira” age: 24 } REQUEST { artist(name: “MC Carol”) { name bio age } }
41. VARIÁVEIS
42. RESPONSE { user { name: “Ana” } } REQUEST query getUserNameById( $userId: String) { user(id: $userId): { name } } VARIABLE { userId: ‘21312321’ }
43. FILTER
44. RESPONSE [{...},{...},{...},{...},{...} ,{...},{...},{...},{...},{...}] REQUEST user { followers( first: 10, orderBy: { field: CREATED_AT, direction: DESC }){ name } }
45. PAGINATION
46. RESPONSE [{...},{...},{...},{...},{...} ,{...},{...},{...},{...},{...}] REQUEST user { followers( first: 10, offset: 10){ name totalCount } Posts (first: 5, offset: 0) }
47. @skip(if: condition) @include(if: condition)
48. MUTATIONS
49. POST PATCH PUT
50. VOCÊ CRIA A SUA AÇÃO
51. inactivateComment removeComment pinComment editComment flagComment
52. REQUEST mutation deletePost{ deletePost(id: “123”){ content } } VARIABLE { content { .. } }
53. RESPONSE { ‘data’ { ‘token’: “12345” } } REQUEST mutation authUser($user: User) { authUser(user: $user){ token } } VARIABLE { user { ... } }
54. SUBSCRIPTION
55. REALTIME
56. Permite que o servidor envie dados aos clients quando um evento específico acontece no backend.
57. EVENT-DRIVEN
58. Mutations definem uma série de ações que mudam seus dados. Subscriptions definem uma série de eventos que você pode se inscrever(subscribe) pra quando os dados mudam.
59. • Notificações • Mensagens • Live Feed
60. Independente de meio de transporte • WebSockets • ZeroMQ ou MQTT • Enviar POST pra um callback
61. REQUEST subscription { subscribeToComment (filter: { mutation_in : [CREATED] }){ comment { content author { username } } } } RESPONSE { “data”: { comment { content: “Nossa”, author { username: “Ana” } } } } RESPONSE { “data”: { comment { content: “Eita”, author { username: “Joao” } } } }
62. WEBHOOK
63. Webhooks são chamados assim que uma certa ação é efeita, recebendo um payload com os dados que você precisa.
65. TYPE SYSTEM
66. ID BOOLEAN FLOAT STRING INT
67. const schema = buildSchema {` type Query { id: ID paid: Boolean price: !Float basket: [String] tax: Int } `}
68. OBJECT TYPES
69. type Boleto { id: ID value: Float CPF: String expiration: Date status: Status } enum Status { PAID WAITING EXPIRED }
70. type Talk { id: ID title: String description: String published: Date speaker: Speaker event: Event } type Speaker { id: ID firstName: String lastName: String talks: [Talks] } type Event { id: ID name: String location: String talks: [Talks] }
71. Type schemes com tipos de dados dentro de tipos de dados dentro de tipos de dados
73. VERSIONAMENTO
74. type Boleto { id: ID value: Float CPF: String @deprecated expiration: Date status: Status }
75. SCHEMAS
76. “SCHEMAS DRIVEN”
77. SCHEMAS DESCREVEM OS GRAFOS
78. DESCREVEM O CONTRATO ENTRE O FRONT E O BACK
79. TYPE SYSTEM QUERY LANGUAGE SCHEMA
80. CLIENT SERVER GRAPHQL DATA RESOLVE BODY JSON { query: {..} variables:{..} } { data: {..} errors:{..} }
81. FUNÇOES RESOLVER
82. CADA EDGE TEM UMA FUNÇÃO RESOLVER QUE LIDA COM OS DADOS
83. SERVER GRAPHQL RESTfull Api AWS Lambda SOAP Service MONGODB HTTP HTTP SOAP TCP/IP
84. GRAPHiQL
86. MSGS CLARAS SYNTAX HIGHLIGHT AUTO COMPLETE AUTO DOCUMENTAÇÃO
87. REST MORREU?
88. NÃO.
89. MOTIVOS P/ USAR GRAPHQL EM PRODUÇÃO
90. • DIFERENTES CLIENTES: Há a necessidade de criar várias versões de dados diferentes para múltiplos clientes. • PREPARAR DADOS: Há muito esforço do server preparar os dados e do cliente para parsea-los. • LINKAR DADOS: Quando os dados mudam com muita frequência e precisam estar linkados sempre.
91. MOTIVOS P/ NÃO USAR GRAPHQL
92. • HYPE: Achar hype, gostar do stack do facebook ou “usamos ReactJS”. • HTTP É ANTIGO: Consistencia, Caching, Status Code. • TOO NORMALIZED: Tenho muitas relações no meu banco de dados.
93. GRAPHQL NÃO VAI RESOLVER SEUS PROBLEMAS DE DESIGN DE API
94. GOSTEI
95. PROCURE SOBRE DATA LOADER
96. APOLLO OU RELAY
97. GRAPHQL É TOP
98. howtographql.com/ graphql.org/learn/ github.com/chentsulin/awesome-graphql graphql-weekly.com fun fun function graphql series
99. meetup.com/ReactJS-SP/ meetup.com/GraphQL-Brasil t.me/reactjs_br t.me/graphql
100. OBRIGADA :) speakerdeck.com/anabastos
101. DÚVIDAS? saq@anabastos.me speakerdeck.com/anabastos