anteriorpróximo
Aula 29
Cursos / GraphQL com Express (Servidor Backend API JSON)
Pedido de HTTP para Fazer o Seu Próprio Cliente de GraphQL

Summary

Resumo da Aula sobre Clientes de GraphQL

Nesta aula, discutimos como criar um cliente de GraphQL a partir do zero, usando requisições HTTP. Apesar de já existirem várias bibliotecas disponíveis, como Apollo e Relay, o foco aqui é entender o funcionamento básico das requisições para um servidor GraphQL.

Ferramentas

  • Postman: Utilizado como cliente HTTP para demonstrar as requisições. Você pode baixá-lo em getpostman.com.

Estrutura do Pedido

  1. Endpoint: As requisições são feitas para /graphql usando o verbo HTTP POST.
  2. Estrutura JSON do Pedido:
    • operationName: Nome da operação que você deseja executar (ex: obter companhia).
    • query: A query GraphQL que você deseja executar, que pode incluir consultas (query) e mutações (mutation).
    • variables: Um objeto JSON para as variáveis utilizadas na query.

Exemplo de Requisição

  • Para obter informações de uma companhia: 
    {
  "operationName": "obterCompanhia",
  "query": "query obterCompanhia($id: ID!) { companhia(id: $id) { nome, site } }",
  "variables": {
    "id": "3"
  }
}

Mutação

  • Para adicionar uma companhia: 
    {
  "operationName": "adicionarCompanhia",
  "query": "mutation adicionarCompanhia($nome: String!) { adicionarCompanhia(nome: $nome) { id } }",
  "variables": {
    "nome": "Nova Companhia"
  }
}

Considerações Finais

  • Use \n (barra invertida + n) para quebras de linha na query JSON.
  • Normalmente, as queries são armazenadas em arquivos separados e importadas conforme necessário em aplicações front-end, como React.
  • Há clientes de GraphQL prontos, como Apollo Client e Relay, se você preferir não desenvolver seu próprio cliente.

Esta aula forneceu uma introdução ao envio de requisições GraphQL e à construção de um cliente simplificado. Até a próxima aula!

Scroll down above for more

Video Transcript

Nesta aula vamos falar um pouco de como você pode fazer o seu próprio cliente de GraphQL. Antes de a gente começar a aula, gostaria de dizer que já há vários clientes de GraphQL. Por exemplo, existe o Apollo e existe o Relay. Se o sol me mostra, Apollo, GraphQL. Tem esse cara aqui, o Apollo. E acho que serve tanto como um servidor como o cliente. Tem o Apollo cliente. Tem também Relay. Relay, GraphQL. Esse aqui. Tá. Só uns clientes que já existem. Nesta aula a gente só vai falar de como você pode fazer seus próprios pedidos de HTTP para o servidor de GraphQL. Para poder a gente dar uma olhada nisso, vou usar o Postman. Postman é o meu cliente aqui para fazer pedidos de HTTP. Se você quiser baixar o Postman, pode ir em Postman. Postman, getpostman.com, tá certo? Para baixar esse aplicativo se você quiser. Então, vamos fazer esse pedido aqui para obter a companhia. Eu quero olhar no console, no DevTools, na Abbot Network. Eu quero ver qual é o pedido, como é que ele é feito. Note que o pedido é feito ao barra GraphQL, o verbo post, tá? E na payload aqui, ele tem esse objeto, em formato JSON. Tem essa propriedade operation name, que vai ser o nome nesse caso da operação. Vai ser, no caso, vai ser o nome da query. Tem a propriedade query, que é a nossa query lá que a gente escreveu, do GraphQL. Observe que tem query e tem mutação no lado direito, no lado esquerdo, query. No lado direito, primeira linha, tem mil textos. Então, você tem que dizer a ele qual operação você quer executar, nesse caso, usando o operation name. Obter companhia, que vai ser a query, obter companhia, tá? E tem a variável que a gente usou dentro da propriedade variables, tá? Formato JSON. Vamos dar uma olhada no... Adicionar companhia agora? Vou clicar em adicionar companhia. Operação com sucesso. Vou lá para a aba network, rede. E vou dar uma olhada aqui. Mesma coisa, barra, GraphQL, verbo post. Operation name agora é adicionar companhia. Na hora de que a query é a mesma. É certo que agora o operation name mudou para adicionar companhia, que é o nome da butação. É o nome, logo após a palavra, chave, mutation, tá? Então, isso é preciso para indicar qual operação ser realizada. Tem a variables aqui como antes. Então, a gente vai fazer a mesma coisa aqui, esse pedido lá do postman, para ilustrar como você pode fazer. Sobre o próprio cliente. Estou aqui no postman, vou botar a variable post, barra, GraphQL. Vou clicar em body, que é corpo. E vou botar raw e application direction, tá? Então, vou digitar a direction. Primeiro a gente tem que dizer operation name, né? Vamos testar obter companhias. Tem que ser duas aspas. E a query, né? A query você tem que escrever. Normalmente, você salva essas queries já escritas em um arquivo e você pode importá-las e substituir... E só usar variables depois para substituir os valores, tá? Como a gente já escreveu a query lá no GraphQL, vou copiar de lá. Então, deixa eu minimizar. Vou copiar essa query aqui, olha. Que está aqui. Tá. Deixa eu copiar só a query. De volta postman. Collei, eu não sei se vai funcionar assim porque os... Tem quebra de linha, tá? Está vírroa aqui. Agora, para variables, você vai passar nesse caso, só o ID. Vamos por 3. Vamos ver no que dá. Enviar. Então, está dizendo que deu erro, postbody. O JSON está aí válido, provavelmente por causa da quebra de linha. Ah, vamos ver aqui como fazer isso. Vamos ver para quebra de linha, você tem a... A barra invertida seguida de n, eu vou botar isso e ver se funciona. Barra invertida, seguida de n. Barra invertida, seguida de n. Claro que você iria programar isso para fazer isso automaticamente, né? Só quero ilustrar. Vamos funcionar o negócio. Vamos ver agora. Então query, obte companhia, eu usei o barra invertida n. Para indicar a quebra de linha. Agora, falou que não conhece a operação, obte companhias, porque... Ah, é singular, porque eu escrevi o nome da query que é obte companhia. Enviar. Então, deu certo. Microsoft, um dado em... E o site. Tá? Então, do seu cliente, você vai enviar fazer um pedido, HTTP, verbo post, barra, grafo, PL. Aí, você vai passar as seguintes propriedades no formato JSAM. O nome da operação, nesse caso, é JSAM. O nome da operação, nesse caso, é o nome da query. Se fosse mutação, você... Era só o nome da mutação. Aí, na query, você vai pôr, seja query, seja mutação, qualquer coisa. E para a cara quebra de linha, uso barra invertida n. E para variáveis, você diz variables, faça um objeto aqui, tá? Esse valor será substituído na query aqui, por exemplo, com esse dólar, pelo próprio servidor. Tá? Então, é isso. Nessa aula, a gente aprendeu como fazer um pedido para poder... fazer nosso próprio cliente de GraphQL para fazer o pedido ao servidor, é só usar o operation name query and variables, tá? Normalmente, você escreveria as queries, daria o nome a cada query, para poder usar o operation name. E você escreveria esse no arquivo separado e você importar... importa query lá do seu cliente, você tem, por exemplo, um aplicativo de React ou qualquer outro... de front-end, você vai... aí, importa query, pega aquela query, põe nessa propriedade aqui, faz um pedido do h2tp, sei lá, fetch, ou axios, qualquer coisa, e põe as variables, põe operation name, essas coisas, tá? Portanto, notar que já existem clientes de GraphQL como Apollo Client e o Relay, se você não quiser fazer tudo do zero. Por essa aula é só. Até a próxima.
See more
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação:
Quero contribuir