How to test GraphQL using mobile phone?

Have you ever built and sent requests to API from your mobile phone? Do you know how to run GraphQL query without a computer? In this article I will show how to test GraphQL API on a mobile phone.

I noticed that there are not many mobile apps available that allow to test APIs, especially when it comes to GraphQL APIs. However, users working on phones definitely need such apps, let me give an example and explain why.

If you ever opened any GraphQL API in a browser on your phone, you have probably noticed that the official GraphQL interface is not mobile friendly (see the screenshot below). Making requests or exploring docs is very inconvenient, and even switching to landscape mode doesn’t help the situation. That’s the reason why I decided to find an app on the App Store that offers a mobile-optimized experience.

As official GraphQL interface doesn’t support mobile devices, it’s almost immposible to use.

So I ran a search for “GraphQL” in App Store and found API Tester (apparently they have Android app as well), which according to the description allows you to test all types of API and has a GraphQL editor:

Powerful GraphQL editor with full-scale experience: body editor with Queries, Mutations, Subscriptions and syntax support; variables editor; documentation explorer; request settings and metadata.

I have used this GraphQL app for several of my tasks and I can say that I pretty much liked it. In this story I will illustrate how to run requests in API Tester using the SpaceX GraphQL API as an example.

To get the information about SpaceX missions (the number of launches, mission names, links for articles, etc.) available in this API, I followed these steps:

1. When I launched API Tester and tapped on + to create a new request, I noticed that there is a special button to make GraphQL request (🎯).
2. The endpoint is: https://api.spacex.land/graphql.
3. There is also a Body tab where we can specify the information we want to receive in response. You can see the example of code I used in Body in the screenshot below.
4. And that’s it! Execute GraphQL query and you’ll get the response.

Example of GraphQL request in API Tester app.

What about API documentation? A list of all queries, mutations and subscriptions can be found in the Docs tab. Thus, API Tester offers a more convenient way to explore API Docs and to copy pieces of code for other requests.

GraphQL docs tab for SpaceX API.

If necessary, variables, headers, cookies and authorization info can also be added to the request. I tried adding a variable, for example, to get the concrete mission data and not the list. For that purpose, I added some code into the Variables tab to get the data about the launch with ID=1 and changed the body as shown below.

Example of GraphQL request with variables.

Find the responses I received in the screenshots below.

Screenshot 1 — response for request with data about all the space launches in SpaceX API, Screenshot 2 — response with data about launch with ID=1.

Also, I noticed that there is an access to the response metrics in the app where it’s possible to compare the size of the different responses or to measure the response time.

All in all, API Tester does a great job. This mobile app is minimalistic and at the same time rich in functionality, so it allows you to do very complex tasks on a small screen. You no longer need a laptop to work with GraphQL!

API Tester official website, where you can find links for downloading the app on the App Store and Google Play, is: https://apitester.org.

📱Thank you for reading! Feel free to comment and share your thoughts!📱