BackEndSP - GraphQL

Transcript

1. APIs NodeJS com GraphQL
2. Olar! Meu nome é Ana Bastos Sou engenheira de software e cientista da computação. 2 anabastos @naluhh @anapbastos
4. Client Server HTTP
5. HTTP REQUISIÇÃO Cabeçalho Corpo RESPOSTA Cabeçalho Corpo
6. GET POST PUT DELETE PATCH HEAD TRACE OPTIONS
7. Songs Followers 1.239 Jovelli How I Feel Ana Luiza Lorem Ipsum
8. 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: {..} ... }
9. HTTP GET Songs Followers Ana Luiza Lorem Ipsum users/123/posts RESPONSE posts { { id: .. music: {..}, replies: {..}, likes: {..}, shares: {..}, … }, ... } Jovelli How I Feel
10. HTTP GET Songs Followers Ana Luiza Lorem Ipsum users/123/followers RESPONSE followers { { name: .., accountName: .., Nickname: Vilmar, email: {..}, avantar: .. … }, ... Jovelli How I Feel
11. Followers 1.239 Britnet Spears Toxic Pablo Estou indo embora Musical Taste: Pop / Sofrência Most popular posts
12. - Underfetching gerando a necessidade de fazer muitas requisições ou de criar endpoints muito específicos - Overfetching e com isso problemas em performance
13. FACEBOOK
14. “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
15. GRAPHQL
16. Novo standard de APIs
18. Nele todas as requisições são POST e os dados requisitados são explicitamente declarados
19. SOAP?
20. Desenvolvedores do Facebook -Mano vamo ter que usar SOAP. - Puts mas SOAP usa XML. Pra JS é tudo JSON. Seria loco se a gente usasse SOAP com JSON. - Hold my beer
21. SOAP 2.0 / GraphQL Auto-documentação Tipos / Schemas Usa JSON ao invés de XML e chama de uma linguagem nova
22. CORE CONCEPT
23. TYPE SYSTEM QUERY LANGUAGE SCHEMA
24. SCHEMA BASED
25. ID BOOLEAN FLOAT STRING INT
26. users folowers posts
27. posts
28. type Post { id: ID artist: String album: String music: String genre: String likes: Int }
29. user
30. type User { id: ID name: String avatarUrl: String description: String age: Integer status: Status musicalTaste: [String] posts: [Post] followers: [Follower] } enum Status { Active Blocked Inactive }
31. folowers
32. type Follower { id: ID user: User sinceWhen: Date }
33. Schemas descrevem o contrato entre o front e o back e o relacionamento entre os dados
34. ROOT TYPE FOLLO WERS POST USER [USER]
35. “EDGE”
36. QUERY MUTATION SUBSCRIPTION
37. QUERY
38. HTTP POST graphql/ RESPONSE data { userName: .., avatar: .., bio, followers [ {avatar: ..}, .. ] posts [ {artist: …, name:} BODY query profile{ user { name description } followers{ avatar } posts { artist name } }
39. ARGUMENTS
40. HTTP POST graphql/ RESPONSE data { userName: .., avatar: .., bio, followers [ {avatar: ..}, .. ] posts [ {artist: …, name:} BODY query profile { user { name description } followers{ avatar } posts(first: 5, orderBy: “date”) { artist name } }
41. HTTP POST graphql/ RESPONSE data { userName: .., avatar: .., bio, followers [ {avatar: ..}, .. ] posts [ {artist: …, name:} BODY query profile { user { musicalTaste } followers(first: 4){ avatar } popularPosts(first: 5, orderBy: “popularity”) { artist name } }
42. MUTATION
43. HTTP POST graphql/ RESPONSE data { status: “ok” } BODY mutation addPost { artist: “...” name: “...” album: “...” } }
44. addPost deletePost blockPosts promotePost
45. FORTEMENTE TIPADO
46. HTTP POST graphql/ RESPONSE Get graphql error BODY mutation addPost { artist: “...” name: 1 album: { name: “aa” } } }
47. HTTP POST graphql/ RESPONSE Get graphql error BODY query profile { qualquerCoisa }
48. BACK-END FRONT-END
49. 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” } } } }
50. CLIENT SERVER GRAPHQL DATA RESOLVE BODY JSON { query: {..} variables:{..} } { data: {..} errors:{..} } G R A P H Q L
51. INDEPENDE DE BD
52. SERVER GRAPHQL RESTfull Api AWS Lambda SOAP Service MONGODB HTTP HTTP SOAP TCP/IP
53. Como o graphql vai me ajudar(backend) a pegar estes dados? Não vai :(
54. Já que GraphQL é agnostico de dados cada query ou mutation tem uma função resolver e nela é nossa responsabilidade buscar e estruturar os dados de acordo com o Schemas da forma mais perfomática pois o muitas vezes o client pode solicitar diversos dados com alta complexidade por de baixo dos panos
55. 1 requisição 10 queries no banco
56. Query em JS
59. RELAÇÕES
60. ROOT TYPE FOLLO WERS POST USER [USER]
61. BODY query profile { user { folowers: [ user: { folowers: { user:... } } ] } Maximum depth: 3
62. SUBSCRIPTIONS
63. 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.
64. Notificações Mensagens Live Feed
65. Independente de meio de transporte • WebSockets • ZeroMQ ou MQTT
66. RESPONSE { getPosts { ‘content’: { ... } } } REQUEST subscription getPosts($post: Post) { getPosts(content: $post){ content } }
67. GraphiQL
68. SYNTAX HIGHLIGHT AUTO COMPLETE AUTO DOCUMENTAÇÃO
69. SYNTAX HIGHLIGHT AUTO COMPLETE AUTO DOCUMENTAÇÃO
71. Altair
72. Insomnia
73. COMO FAÇO NO NODE
74. yarn add -g <insiraFramework>-graphql
79. graphiql/ graphql/
80. MONTAR SCHEMA EM GRAPHQL
82. MONTAR SCHEMA EM JS
83. type Post { id: ID artist: String album: String music: String genre: String likes: Int }
87. O rest morreu? Não
88. MOTIVOS PARA USAR GRAPHQL
89. DIFERENTES CLIENTES: Há a necessidade de criar várias versões de dados diferentes para múltiplos clientes. LINKAR DADOS: Quando os dados mudam com muita frequência e precisam estar linkados sempre. NECESSIDADE DE ENDPOINTS MUITO ESPECIFICOS
90. MOTIVOS PARA NÃO USAR GRAPHQL
91. MINHA EXPERIÊNCIA
92. HYPE: Minha empresa gosta do stack do facebook e todo mundo acha mo hype. O FRONTEND SUGERIU REST É ANTIGO kk TOO NORMALIZED: Tenho muitas relações.
93. GraphQL Rest API HTTP METHODS POST GET POST PUT ETC Status Code Precisa lidar com todos os errors Default Cache do proprio navegador Precisa usar DataLoader. Default Peso da request Mais leve pois é só o necessário Overfetching / Underfetching Complexidade Escondida embaixo do tapete Explicita Documentação Default Precisa implementar
94. TIPS Deixar models extremamente dinâmicas(limits, orders, filters, pegar apenas os campos requisitados na query GraphQL). Usar context do graphQL para guardar estado Crie seu proprio status code
95. COMO ORGANIZAR O PROJ
97. DEMO? 97
98. GraphQL JS graphql.org/graphql-js How to graphql howtographql.com/basics RobinWieruch Graphql Series robinwieruch.de/graphql-tutorial FunFunFunction Graphql Series
99. Telegram t.me/GraphQLBrasil Conf graphqlconf.com.br Github github.com/graphql-brasil Slack graphql-slack.now.sh react-brasil-slack.herokuapp.com
100. Obrigada! anabastos @naluhh @anapbastos 100