Intercepting GraphQL Requests

Using Graph Proxy for desktop unlocks a ton of features not possible through a browser extension. Mainly we are able to intercept network traffic to do things such as mocking.

In doing so we gain a quick way to test different scenarios within our UI. Imagine for example we display a list of todos.

query {
  allTodos {
    id
    label
  }
}

Requesting data from our running API we will see a rendered list on screen.

With no code changes to our application we can test other responses and edge cases such as empty lists or error states.

Intercepting Requests

Using Graph Proxy we can setup a mock which targets any query by name. In this case allTodos.

With the mock applied we can refresh our page and see the mocked data on screen. The actual network request was intercepted.

We could also force an empty array to see how the UI handles this.

Continuing with this we can also tell Graph Proxy to return an error for the query.

Now when we load our app, we can test that network errors are being handled correctly.

Removing the mock will allow our app to continue as normal.

This easily unlocks the ability for anyone working on the product to test different edge cases without need to access or change any source code. This means non developers could also test edge cases with no-code.

Why not give query interception a try, check out this public Pokemon API.

Grab a copy of the desktop software from our main site.

Intercept with Graph Proxy