Introdução

Storefront API

O Storefront API permite ao lojista proporcionar a melhor experiência de compra onde quer que seu cliente esteja. Além da opção padrão por website, a API também pode ser utilizada para personalizar outras alternativas, como aplicativos ou totens em lojas físicas.

Com ela é possível acessar informações de produtos, hotsites, banners e conteúdos e realizar buscas de produtos paginados. Futuramente, será possível finalizar compras (frete, checkout e pagamentos), checar informações de pedidos realizados e personalizar temas para a loja virtual.

Casos de uso

Venda de produtos vinculados a uma loja Wake Commerce
Aplicativos utilizando a plataforma Wake Commerce
Venda ou consulta de produtos por outros meios, como totens em lojas físicas

GraphQL

O que é GraphQL?

GraphQL é uma linguagem de query para APIs usada para atender a essas queries com seus dados existentes em tempo de execução. GraphQL fornece uma descrição completa e compreensível dos dados em sua API, dá aos clientes o poder de pedir exatamente o que eles precisam e nada mais, torna mais fácil evoluir APIs ao longo do tempo e possibilita a criação de poderosas ferramentas de desenvolvimento.

Os dados são modelados em um esquema (schema) estaticamente tipado, ou seja, somente os tipos definidos que fizerem parte do schema são aceitos e retornados nas queries. Tendo um schema bem definido, é possível fazer requisições de campos específicos para sua aplicação, sem comprometer a performance do sistema, como, por exemplo, apenas o ID de um produto, sem suas informações de preço, nome, etc.

O GraphQL também permite juntar várias queries em apenas uma requisição, reduzindo o número de endpoints e consultas a bancos de dados necessários. Por exemplo, informações de produtos, banners e conteúdos em uma requisição para o mesmo endpoint do Storefront API.

O Storefront API utiliza como base o GraphQL para realizar a requisição dos dados.

Introdução ao GraphQL

Query

Como dito anteriormente, no GraphQL é possível obter o retorno apenas do que foi solicitado e nada mais.
Exemplo de query:

query {
  users {
    id
    login
    lastLoginAt
  }
}

O retorno da query é em formato JSON, o que facilita ainda mais o entendimento.
Retorno da query de exemplo utilizada anteriormente:

{
  "data": {
    "users": [
      {
         "id": 1,
         "login": "user_1",
         "lastLoginAt": "2012-04-23T17:26:41.111Z"
      },
      {
         "id": 2,
         "login": "user_2",
         "lastLoginAt": "2012-04-21T18:25:43.222Z"
      }
    ]
  }
}

Argumentos

A depender da query, ela pode aceitar receber argumentos para auxiliar na filtragem dos dados solicitados. Exemplo:

query {
  user(id: 2) {
    id
    login
    lastLoginAt
  }
}

Retorno:

{
  "data": {
    "user": {
      "id": 2,
      "login": "user_2",
      "lastLoginAt": "2012-04-21T18:25:43.222Z"
    }
  }
}

Mutation

São requisições com o intuito de inserir ou alterar dados. Exemplo:

mutation {
  setText(text: "text") {
    text
  }
}

Retorno:

{
  "data": {
    "text": "text"
  }
}

Variáveis

Para queries e mutations é possível utilizar variáveis para auxiliar nas consultas e inserções. Exemplo de query:

query GetUser($userId: Long){
  user(id: $userId) {
    id
    login
    lastLoginAt
  }
}

As variávies são em formato JSON:

{
  "userId": 2
}

Retorno:

{
  "data": {
    "user": {
      "id": 2,
      "login": "user_2",
      "lastLoginAt": "2012-04-21T18:25:43.222Z"
    }
  }
}

As mutations seguem o mesmo esquema.