Olá, pessoal!

Nesse artigo você encontrará alguns conceitos e motivações de GraphQL e Apollo Client, assim como exemplos de configuração e integração de front-end (React/Next e Vue) para consumo de APIs GraphQL.

O artigo é voltado para desenvolvedores front-end com pouco ou nenhum conhecimento de GraphQL e não tem como objetivo se aprofundar em como o GraphQL se comporta no lado do servidor, e sim do lado do cliente. É ideal para desenvolvedores front-end que estão precisando consumir suas primeiras APIs GraphQL.

Esse artigo foi escrito em conjunto por Pedro Henrique e Helen Dias ❤️

Sumário

  1. O que é e para que serve GraphQL
  2. Quando usar GraphQL
  3. O que é query, mutation e type no GraphQL
  4. Vantagens e desvantagens do GraphQL
  5. O que é e para que serve Apollo Client
  6. Configurando Apollo Client no React/Next
  7. Integrando queries com Apollo Client no React/Next
  8. Integrando mutations com Apollo Client no React/Next - TODO
  9. Configurando Apollo Client no Vue
  10. Integrando queries com Apollo Client no Vue
  11. Integrando mutations com Apollo Client no Vue - TODO
  12. Conclusão - TODO

O que é e para que serve GraphQL

Em livre tradução da documentação oficial, GraphQL é uma linguagem de query (consulta) e um ambiente de execução para APIs que ajuda na consulta dos seus dados. Também fornece uma descrição completa dos dados da sua API, dá ao cliente o poder de pedir exatamente o que precisa e nada mais, facilita a criação de APIs ao longo do tempo e habilita ferramentas poderosas às pessoas desenvolvedoras.

Segundo o blog do Facebook, o GraphQL surgiu devido a necessidade de uma API de busca de dados poderosa o suficiente para contemplar todas as pesquisas do Facebook e, ao mesmo tempo, que fosse simples o suficiente para uso de novos desenvolvedores, que não estavam tão familiarizados com a tecnologia. Foi criado em 2012 para atender essas necessidades e foi liberado à comunidade em 2015.