---
updatedAt: 2025-05-13T12:34:21.000Z
agentTools:
projectIndex: https://learn.vtex.com/llms.txt
---
# GraphQL: Using GraphiQL
{`
`}
# GraphQL: Using GraphiQL
## Introduction
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
[GraphiQL](https://github.com/graphql/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.
## Testing your query
1. Open the GraphiQL route and type the code below in the coding area:
```
query ($topN: Int) {
productList(topN: $topN){
slug
count
}
}
```
2. The query that we just declared uses a variable (*topN*). Now we need to declare it in the *Query Variables* area:
```
{
"topN": 2
}
```
> :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:
{`
