How to use GraphQL with Postman

GraphQL is an open-source technology that allows us to query only the data that we require, unlike the traditional REST architecture which returns us the entire resources and data with specific endpoints configured for the same. Using GraphQL, we specify using the query the data that we want, and it returns the specified data in the specified format. It helps reduce the amount of data transfer over the network and saves network bandwidth. In this article, we will learn how to use GraphQL queries in Postman.

Setting Up Postman for GraphQL

Step 1: Open Postman

Download and install the Postman application from their official website. This step is the prerequisite for all the consequent steps below. After installing, open the Postman application.

Step 2: Create a New Request in Postman

Click on the “New” button in the top-left corner of the Postman, to create a new request, and then select HTTP request. After that, change the HTTP method to POST, and enter the GraphQL API endpoint in the URL section.

API endpoint - https://graphql-pokeapi.graphcdn.app/

After performing the above steps, the Postman should look like below

Now, GraphQL requests work the same way as any other HTTP requests in Postman. We will input the API endpoint in URL section, change the HTTP verb to POST, and then specify the query in the request body of the Postman. There are several other approaches we can take to query GraphQL endpoints in the Postman. Let’s look at those below:

Note: For all the approaches below, we will be utilising a single GraphQL endpoint to query the requests from –

https://graphql-pokeapi.graphcdn.app/

Writing GraphQL Queries in Postman

Writing a GraphQL query in Postman is similar to writing the GraphQL query in other tools like GraphiQL. And as discussed above, there are multiple approaches one can take, to write and send queries in the Postman. Let’s take a look at the different approaches below –

Approach 1: Writing GraphQL Queries in the HTTP Request Body in Postman

We can hit the GraphQL API endpoint, and send the query for that API in the request body in Postman. We would also need to change the request method to POST. Also to send the GraphQL query as a HTTP request in the Postman, we would need to change the body type to GraphQL as well.

Example: In this example, we will query the pokemon list, and fetch upto total 10 pokemons, with an offset of 0.

query getPokemons {
    pokemons(limit: 10, offset: 0) {
        count
        results {
            id
            name
            image
        }
    }
}

Output:

The output of the above postman call will look like below

Approach 2: Sending GraphQL Queries as a JSON String in the Request Body of Postman

In this approach, we will specify the request headers “Content-Type” to be of type “application/json”, and then send the query in the request body as a JSON string. This is the 2nd way we can write a GraphQL query in the Postman. Note that, here as well, the HTTP method required will be POST.

Postman request body should be selected as “raw”, and then “JSON”, and should look like below

{
    "query": "query getPokemons { pokemons(limit: 10, offset: 0) { count results { id name image } } }"
}

Output:

The output of the above postman call will look like below

Approach 3: Importing the cURL Command for GraphQL Query into the Postman

In this approach, we will directly import a cURL command for a GraphQL query into the Postman, and then hit the generated endpoint to get the data. This is the 3rd way we can generate and write a GraphQL query in the Postman. This is the simplest way as we are copying the request as is, which was generated by the browser while sending the query to the GraphQL server, and pasting (importing) it into the Postman. The Postman is smart enough to understand that the request is a GraphQL request, and does all the things on its own, and all we have to do is send the query to get the response.

Example cURL to import into the Postman

curl 'https://graphql-pokeapi.graphcdn.app/' \
  -H 'authority: graphql-pokeapi.graphcdn.app' \
  -H 'accept: */*' \
  -H 'accept-language: en-GB,en' \
  -H 'cache-control: no-cache' \
  -H 'content-type: application/json' \
  -H 'origin: http://localhost:3000' \
  -H 'pragma: no-cache' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not_A Brand";v="8", "Chromium";v="120", "Brave";v="120"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-gpc: 1' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36' \
  --data-raw '{"operationName":"getPokemons","variables":{},"query":"query getPokemons {\n  pokemons(limit: 10, offset: 0) {\n    count\n    next\n    previous\n    status\n    message\n    results {\n      id\n      name\n      image\n      __typename\n    }\n    __typename\n  }\n}"}' \
  --compressed

Output:

The output of the above postman call will look like below

Conclusion

In this article, we learned how to use and query GraphQL endpoints in the postman. We looked at multiple approaches to query the GraphQL endpoints, including sending the GraphQL query in the request body in the postman, and changing the HTTP verb to POST, or importing the entire GraphQL query from a web browser’s network request into the postman, or sending the query as a JSON string in the request body, and changing the header’s content type to “application/json”.