Conhecendo o GraphQL

GraphQL é uma ótima ferramenta e tem se tornado bastante popular no desenvolvimento de APIs. No artigo de hoje vamos entender o que é, quais as vantagens e por que usar GraphQL.

O que é

GraphQL é uma linguagem para escrita de “querys”. Isso mesmo, uma query: da mesma forma que você escreve em, por exemplo, um banco de dados, para buscar/adicionar/editar/excluir determinada informação, você pode escrever utilizando GraphQL.

Mas calma, GraphQL não é um banco de dados. O legal do GraphQL é que ele permite que você escreve querys diretamente em uma API, tendo total liberdade sobre as informações que você quer e precisa.

Vamos supor que você quer buscar uma lista de produtos, basta utilizar a query:

query {
    products {
      id,
        name,
        price,
        discount
    }
}

E você terá como resultado um JSON como:

{
    "products": {
        "id": 1
        "name": "Product 1",
        "price": 10.00,
        "discount": 2.00
    }
}

E quando digo sobre liberdade, é porque você pode escolher apenas as informações que você precisa. Vamos supor que em determinada situação você precisa apenas do nome do produto, basta então pedir apenas o name:

query {
    products {
        name
    }
}

Como resultado:

{
    "products": {
        "name": "Product 1",
    }
}

Pense bem o quão poderoso é esse recurso. Já pensou o seu frontend podendo controlar as informações que vem da API?

Qual a diferença entre um API Restful?

Já estamos todos acostumados com uma API Restful com requisições GET e POST para endpoints bem definidos. Com GraphQL já é bem diferente.

Aqui não há mais necessidade de endpoints como um GET /products ou GET /products/:id , com GraphQL existe apenas um único endpoint e as queries que você envia para este endpoint. As informações são montadas todas em cima das querys.

Outra grande diferença é a versatilidade que o GraphQL traz para o uso de uma API. Diferente do modelo Restful, em que endpoints possuem regras e retornam um padrão de dados bem definidos, o GraphQL permite que você trabalhe com mais liberdade, excluindo até mesmo a necessidade de versionamento ou múltiplos endpoints com tratamentos de dados diferentes. Com GraphQL todo esse controle vem diretamente do usuário, ou da aplicação que constrói a query.

Essas diferenças podem ser bastante uteis durante o desenvolvimento, principalmente na etapa de integração entre um frontend e uma API. Com isso, o GraphQL tem chamado bastante atenção dos desenvolvedores e tomando um espaço que antes eram de sistemas Restful.

Schemas, Types, Querys, Mutations

Com GraphQL não existem requisições, muito menos métodos HTTP como GET, POST, PUT e DELETE. As coisas são um pouco diferentes e fazemos os tratamentos de query a partir de Querys, Mutations e Subscriptions

Schemas e Types:

Em GraphQL, Schemas e Types funcionam como uma “modelação” dos dados, permitindo ser usados até mesmo como documentação de sua API.

Os Types são usados para descrever quais dados uma query pode entregar a você:

type Product {
    id: Int,
    name: String,
    price: Float,
    discount: Float
}

Já os Schemas são mesmo uma definição do que a sua API é capaz de fazer, contendo todas as querys e mutations disponibilizadas:

type Query {
    products(id: Int): Product
}

type Mutation {
    newProduct(name: String, price: Float, discount: Float): Product,
    editProduct(id: Int, discount: Float): Product,
    deleteProduct(id: Int): Product
}

schema {
    query: Query
  mutation: Mutation
}

Querys:

Já vimos nos exemplos a cima que as querys podem ser formadas dinamicamente para trazer a exata informação que você precisa. Ainda nas querys, podemos usar parâmetros e alguns argumentos para deixar a sua query mais poderosa com filtros:

query {
    products(id: 1) {
      id,
        name,
        price,
        discount
    }
}

Mutations

Perceba que as querys são como um GET em um sistema Restful, apenas trazem as informações. Mas ações como POST, PUT e DELETE são vistas no GraphQL como “mutations”. Elas também são realizadas como querys e da mesma forma, você pode montar o formato como quiser, a diferença é que esta query agora realiza uma função na sua API:

mutation {
  newProduct(name: "Product 2", price: 15.00, discount: 3.00) {
    id,
    name
  }
}

mutation {
  editProduct(id: 1, discount: 1.00) {
    id,
    name,
        price
  }
}

mutation {
  deleteProduct(id: 1) {
    id,
    name
  }
}

Trabalhando com GraphQL

Para utilizar o GraphQL você precisa mesmo de uma ferramenta extra, para habilitar o uso na sua API, e também outra ferramenta para permitir que o seu frontend possa utilizar esta API em GraphQL. Nestes casos recomendo bastante o uso do Apollo, com o Apollo Server para API e o Apollo Client para o frontend.

Ainda há muito mais para explorar do GraphQL, o artigo de hoje é apenas uma introdução. Nos próximos conteúdos da devGo tentaremos montar alguns projetos utilizando essa tecnologia e ver na prática como ela pode nos ajudar.