GraphQL e WebSockets

GraphQL

• Uma linguagem de consulta para APIs.
• Sistema de tipagem para definir os dados.
• Pode ser utilizado com diferentes bancos de dados.

Qual problema o GraphQL resolve?

• Uma API REST pode trazer dados desnecessários
  • ex.: mostrar o preço da cesta de café pode trazer todos os itens e a descrição.
• O frontend muitas vezes precisa fazer várias chamadas para obter o que precisa
  • ex.: informação da padaria e das cestas disponíveis (2 chamadas).

Serviço GraphQL — definindo tipos e campos

type Post {
  title: String!
  author: Person!
}

type Person {
  name: String!
  age: Int!
  posts: [Post!]!
}
        

Serviço GraphQL — realizando consultas

{
  allPersons {
    name
  }
}
            

{
  "allPersons": [
    { "name": "Johnny" },
    { "name": "Sarah" },
    { "name": "Alice" }
  ]
}
            

O cliente pede exatamente os campos que quer — nada mais, nada menos.

Consultas — argumentos e campos aninhados

{
  allPersons(last: 2) {
    name
  }
}
            

{
  allPersons {
    name
    age
    posts {
      title
    }
  }
}
            

Serviço GraphQL — cadastrando dados com mutation

mutation {
  createPerson(name: "Bob", age: 36) {
    name
    age
  }
}
        

Assim como as queries, a mutation já devolve os campos pedidos do registro criado.

HTTP

• Modelo de comunicação request / reply.
• Stateless — cada requisição é independente.

HTTP — chat em tempo real?

• Polling: requisições frequentes para verificar se há novas mensagens.
• Duas variantes: short polling e long polling.

WebSocket — o que é um Socket?

• TCP Socket: o meio pelo qual os dados são recebidos e transmitidos para a rede.

WebSocket

• Analogia com sockets, porém funcionando na Web.
• Conexão mantida entre dois pontos (cliente/servidor) onde várias mensagens são trocadas.
• Full-duplex.
• Envio e recebimento de eventos/mensagens.

O handshake, de perto

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat
        

O Upgrade: websocket pede pra trocar de protocolo; o servidor confirma com 101 Switching Protocols — a partir daí, é WebSocket.

WebSocket — Vantagens

• Analogia com sockets, porém funcionando na Web.
• Conexão mantida entre dois pontos, com várias mensagens trocadas.
• Full-duplex.
• Envio e recebimento de eventos/mensagens — event-driven, tempo real.
• Cabeçalho bem menor que o HTTP — menos overhead.

WebSocket — Desvantagens

• Conexões interrompidas não são recuperadas automaticamente.
• Firewalls podem bloquear conexões WebSocket.
• Não otimizado para streaming de vídeo/áudio.

WebSocket — Aplicações

Referências bibliográficas

• TANENBAUM, A. S.; VAN STEEN, M. Distributed Systems. 3. ed. 2018. Cap. 4. ISBN 978-90-815406-2-9. distributed-systems.net
• GRAPHQL FOUNDATION. GraphQL — A query language for your API. graphql.org
• MDN WEB DOCS. The WebSocket API. developer.mozilla.org/.../WebSockets_API