TDC POA - GraphQL

TDC POA - GraphQL

Fcfcfbcdbe8543b6d76c7566d6e1693c?s=128

Ana Luiza Portello

January 22, 2020
Tweet

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
  3. 3

  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

  17. None
  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 ERRO BODY mutation addPost { artist:

    “...” name: 1 album: { name: “aa” } } }
  47. HTTP POST graphql/ RESPONSE ERRO BODY query profile { qualquerCoisa

    }
  48. DEPRECATION

  49. BACK-END FRONT-END

  50. 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” } } } }
  51. CLIENT SERVER GRAPHQL DATA RESOLVE BODY JSON { query: {..}

    variables:{..} } { data: {..} errors:{..} } G R A P H Q L
  52. INDEPENDE DE BD

  53. SERVER GRAPHQL RESTfull Api AWS Lambda SOAP Service MONGODB HTTP

    HTTP SOAP TCP/IP
  54. Como o graphql vai me ajudar(backend) a pegar estes dados?

    Não vai :(
  55. 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
  56. 1 requisição 10 queries no banco

  57. Query em JS

  58. None
  59. None
  60. RELAÇÕES

  61. ROOT TYPE FOLLO WERS POST USER [USER]

  62. BODY query profile { user { folowers: [ user: {

    folowers: { user:... } } ] } Maximum depth: 3
  63. SUBSCRIPTIONS

  64. 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.
  65. Notificações Mensagens Live Feed

  66. Independente de meio de transporte • WebSockets • ZeroMQ ou

    MQTT
  67. RESPONSE { getPosts { ‘content’: { ... } } }

    REQUEST subscription getPosts($post: Post) { getPosts(content: $post){ content } }
  68. GraphiQL

  69. SYNTAX HIGHLIGHT AUTO COMPLETE AUTO DOCUMENTAÇÃO

  70. None
  71. Altair

  72. Insomnia

  73. COMO FAÇO NO NODE

  74. yarn add -g <insiraFramework>-graphql

  75. None
  76. None
  77. None
  78. None
  79. graphiql/ graphql/

  80. MONTAR SCHEMA EM GRAPHQL

  81. None
  82. MONTAR SCHEMA EM JS

  83. type Post { id: ID artist: String album: String music:

    String genre: String likes: Int }
  84. None
  85. None
  86. None
  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

  96. None
  97. GraphQL JS graphql.org/graphql-js How to graphql howtographql.com/basics RobinWieruch Graphql Series

    robinwieruch.de/graphql-tutorial FunFunFunction Graphql Series
  98. Telegram t.me/GraphQLBrasil Conf graphqlconf.com.br Github github.com/graphql-brasil Slack graphql-slack.now.sh react-brasil-slack.herokuapp.com

  99. Obrigada! anabastos @naluhh @anapbastos 99