Agora, com a query e o resolver implementados, precisamos utilizá-los para pegar as informações dos N produtos mais vistos. Utilizando a IDE de GraphQL, podemos testar a query que implementamos anteriormente.

GraphiQL é uma IDE interativa acessada através de um navegador. Antes de utilizar a query na sua app, é interessante testar sua funcionalidade. Para fazer isso, vamos reproduzir o uso da query na IDE do GraphQL.

Explorando um pouco a interface da IDE, há três áreas principais: área de código, área das variáveis da query e a área de debug. É possível checar onde cada área está na interface através da imagem abaixo:

1. Abra a rota do GraphiQL e digite o código abaixo na devida área na interface:

   
   

   _10

   query ($topN: Int) {

   _10

   productList(topN: $topN){

   _10

   slug

   _10

   count

   _10

   }

   _10

   }

   
   

2. A query que acabamos de declarar utiliza uma variável (topN). Agora, precisamos declará-la na área de variáveis:

   
   

   _10

   {

   _10

   "topN": 2

   _10

   }

   
   

   :exclamation: A área de variáveis de query se encontra abaixo da área de código. Para aumentar o seu tamanho, basta clicar no título e arrastar.

3. Por fim, basta clicar no botão de play e checar a saída na área de debug. Os resultados da query devem ser similares ao da imagem abaixo: