Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

[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