[FRONT IN VALE - 2019] - INTRODUÇÃO AO MARAVILHOSO MUNDO DO GRAPHQL

Transcript

1. Maravilhoso mundo do Graphql INTRODUÇÃO AO

2. @kamila_code kamilahsantos /kamila-santos-oliveira @kamilah_santos Kamila Santos, 21 anos Developer @devsjavagirl

3. Quem é esse tal de Graphql Linguagem de consulta baseada

   em grafos, criada pelo Facebook em 2012

4. Quem é esse tal de Graphql O retorno dos dados

   é totalmente previsível, e tornou open-source em 2015.

5. Quem usa Graphql?

6. É tipo Rest? NÃO

7. É tipo Rest? Em Rest, ao realizar buscas, temos vários

   endpoints, no GraphQl só temos um endpoint para acessar os dados do servidor

8. É tipo Rest? Em Rest temos estrutura de dados fixa,

   o que faz com que sempre traga mais dados do que o necessário

9. É tipo Rest? No Graphql trazemos exatamente o que precisamos

   da nossa API através da construção de queries.

10. Como funciona?

11. Como funciona? Query language, server-side runtime para execução dessas queries

    a partir da definição de schema (tipagem)

12. Como funciona? Não está vinculado a nenhum banco de dados

    específico ou mecanismo de armazenamento.

13. Como funciona? Um service é criado definindo types e fields

    e depois criando funções para cada type e cada field

14. Como funciona?

15. Como funciona?

16. Queries? Com o seu service em execução, podemos enviar queries

    para serem validadas e executadas.

17. Queries? Um query é recebida e verificada para que somente

    retorne os types e fields informados na query e depois é executada

18. Queries?

19. Queries?

20. Fields? As queries solicitam fields específicos em objetos .

21. Fields?

22. Fields? As queries em Graphql permitem percorrer objetos relacionados e

    seus campos em uma única solicitação

23. Fields?

24. Fields?

25. Arguments? Além de atravessar pelos objetos e campos podemos passar

    argumentos na busca desses dados

26. Arguments?

27. Arguments?

28. Arguments? Podemos passar argumentos para campos escalares, para fazer conversões

    de dados no server em vez de cada client individualmente.

29. Arguments?

30. Arguments?

31. Aliases Os fields do objeto do resultado correspondem ao nome

    do campo na consulta, não seria possível consultar diretamente o mesmo campo com argumentos diferentes.

32. Aliases Para resolver isto, podemos criar aliases, para renomear o

    resultado do campo para algo mais descritivo que deseje.

33. Aliases

34. Aliases

35. Fragments Imagine uma situação que você tem duas pessoas e

    quer exibi-las lado a lado junto com seus amigos, precisaríamos repetir os campos um para cada lado da comparação?

36. Fragments NÃO. Com os fragments podemos construir conjuntos de campos

    e inclui-los nas consultas necessárias

37. Fragments

38. Fragments

39. Fragments

40. Fragments A ideia dos fragments é recomendada em situações em

    que precisamos dividir os requisitos de dados do aplicativo em parte menores, quando precisa combinar componentes da UI com vários fragments diferentes numa busca inicial.

41. Usando variables em fragments Temos a possibilidade de usar variáveis

    nos fragments das nossas consultas

42. Usando variables em fragments

43. Usando variables em fragments

44. Usando variables em fragments

45. Variáveis Para argumentos dinâmicos, o client pode precisar manipular os

    arquivos em runtime e seriariza-la em formato em Graphql.

46. Variáveis O Graphql vai pegar esses dados e passar como

    um dicionário separado.

47. Variáveis Substitua o valor estático na consulta por $variableName

48. Variáveis Declarar $variableNamecomo uma das variáveis aceitas pela consulta

49. Variáveis Passe variableName: value no dicionário de variáveis separado, específico

    do transporte (geralmente JSON)

50. Variáveis

51. Variáveis

52. Directives Podem ser anexadas a um field ou inclusão de

    fragment, podendo alterar a execução da consulta da forma que o servidor desejar

53. Directives @include(if: Boolean) Inclui somente se o resultado do campo

    é true @skip(if: Boolean) pula o argumento se o elemento for true

54. Directives

55. Directives

56. Directives

57. Mutations? Da mesma forma que as Queries, nas Mutations podemos

    passar campos aninhados

58. Mutations?

59. Mutations?

60. Mutations?

61. Schemas and Types

62. Schemas and Types

63. Interfaces Abstrai um conjunto de campos para serem implementados

64. Interfaces

65. Interfaces

66. Interfaces

67. Servers Clients

68. Referências https://graphql.org/learn https://graphql.org/code/#server-libraries https://graphql.org/code/#graphql-clients https://tableless.com.br/graphql-a-nova-era-d as-apis-web/

69. Referências https://speakerdeck.com/ketemartinsrufino/gr aphql-para-reduzir-complexidade-no-front-e-n o-back https://www.slideshare.net/PaulaSantana12?ut m_campaign=profiletracking&utm_medium=ss site&utm_source=ssslideview

70. Referências https://medium.com/idexo-developers/graphql -e-rest-quais-as-diferen%C3%A7as-99cae22871 a7 https://www.apollographql.com/ https://relay.dev/

71. Referências https://www.graph.cool/ https://hasura.io/

72. Obrigada <3