Support GraphQL Previewer

[NghiaTranUIT]

🐶 Brief

Currently, it's super difficult to see the content of GraphQL requests even though in pretty JSON Previewer. The original discussion at https://www.reddit.com/r/macapps/comments/f7u7bb/proxyman_modern_and_delightful_web_debugging/fihjlwq?utm_source=share&utm_medium=web2x

Let see how we support it 🙌

👑 Criteria

• Research how to support GraphQL Previewer
• Add option to filter particular key in GraphQL request, since those GraphQL URLs are the same

[atdrago]

@NghiaTranUIT Loving Proxyman. I've already recommended it to a couple different people.

I'm curious about this issue. Would it allow Map Local and Map Remote for GraphQL queries and mutations? This is something I've wanted for a long time in Charles, and even sent in feature requests twice for.

In other words, I'd like to map requests to /graphql differently based on the request body. Map Local/Remote are based on path, but since all GraphQL requests typically go to the same path with a different body (operationName, variables, and query) it's impossible to use Map Local/Remote for GraphQL right now, as far as I know. Would that come along with this story or should I file a different issue?

Thank you!!

[NghiaTranUIT]

@atdrago Thank you for your kind words. Since I've just released the Proxyman v2 - which is rewritten with Swift- NIO (https://github.com/ProxymanApp/Proxyman/releases/tag/2.0.0), I totally free to push up new features.

GraphQL is what I'm looking for since there are not many tools that support debugging GraphQL.

---

You're right. At the moment, Map Local/Remote is based on the path, so it's impossible to map the content of the GraphQL. On the other hand, mapping base on operationName, variables, and query seems easier to implement.

I'm planning to support this soon 👍

[atdrago]

Thanks for your quick response!

This is so exciting to hear! I actually saw v2 come through. I updated and it inspired me to come check if anyone has requested GraphQL support yet. Keep up the great work!!!

[nuynait]

@atdrago I want to map local one of the graphQL queries.

One of my solution of map local graphQL queries are appending the query name into the URL. So domain.com/api/graphql changed to domain.com/api/graphql?gqlquery=MyQuery. I plan to modify the URL using the script tool.

Once the script tool has change the request url, I can then map local domain.com/api/graphql?gqlquery=MyQuery to change the response of only that query.

However, when I try this solution, I found that the map local is not applied.
Here are some screenshots:

An interesting fact, that if I choose repeat the request, the response is the local response I have in map local. When repeat the request, the URL is already with the gqlquery=MyQuery, that's why map local works.

It seems that map local only recognize the original url before it changed by the script tool.

It would be really cool if this works.

[NghiaTranUIT]

Hey @nuynait, at the moment, the Scripting will run after the Map Local. Therefore, it's a expected behavior.

To support GraphQL, I suggest that you can use

• Scripting with Import Tool: It allows you to import a local file and set it as a Body Response (Same with Map Local) https://docs.proxyman.io/scripting/snippet-code#json 🙌
• SharedState to share the query from the onRequest to onResponse: https://docs.proxyman.io/scripting/environment-variables#1-shared-state

How to setup

• Create a Scripting with URL Rule: domain.com/api/graphql (No query param)

// /Users/<username>/Library/Application Support/com.proxyman.NSProxy/users/B02D96D5.default_message_32E64A5B.json
const file = require("@users/B02D96D5.default_message_32E64A5B.json");

function onRequest(context, url, request) {

  // 1. Extract the queryName from the request
  var queryName = request.body.query.match(/\S+/gi)[1].split('(').shift();

  // 2. Save to sharedState
  sharedState.queryName = queryName

  // Done
  return request;
}

function onResponse(context, url, request, response) {

  // 3. Check if it's the request we need to map
  if (sharedState.queryName == "user") {
    
    // 4. Import the local file by Action Button -> Import
    // Get the local JSON file and set it as a body (like Map Local)
    response.headers["Content-Type"] = "application/json";
    response.body = file;
  }

  // Done
  return response;
}

The above script will achieve the same result that you're trying 👍

[NghiaTranUIT]

Meanwhile, it's correct that the Scripting Tool should be executed before other tools, such as Map Local, Remote, ...

I will revisit the logic and improve it 👍

[nuynait]

Hi @NghiaTranUIT Thanks for the quick and detailed reply. Thanks for all the tips on how to set up scripting so that I can map to the local response for GQL query. That's really helpful to someone who is new to Proxyman like me.

I would also be very interesting to know when you will be improving the logic since using Map Local tool instead of the scripting would be a much clean and interesting solution instead of doing the map in the scripting tool.