Now, with the query and resolver implemented, we need to use it to retrieve the top n most viewed products. By using the GraphQL IDE, we can test the query we implemented before.

GraphiQL is a graphical interactive in-browser GraphQL IDE. Before using the query in the app, it is interesting to test its functionality. To do so, we will reproduce your query usage in the GraphQL IDE.

Exploring the IDE interface, there are three main areas: the coding area, the query variables area and the debug area. Check where each shows up in the interface in the image below.

1. Open the GraphiQL route and type the code below in the coding area:

   
   

   _10

   query ($topN: Int) {

   _10

   productList(topN: $topN){

   _10

   slug

   _10

   count

   _10

   }

   _10

   }

   
   

2. The query that we just declared uses a variable (topN). Now we need to declare it in the Query Variables area:

   
   

   _10

   {

   _10

   "topN": 2

   _10

   }

   
   

   :exclamation: The Query Variables area is below the coding area, to amplify its area just drag by the title.

3. At last, just click on the play button and check the outcome on the debug area. The query results should look like this: