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 {

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

Todo App Default

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.

Intercept the request

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

Todo App Mocked Todo App Network Mocked

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

Intercept the request

Todo App Mocked

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

Intercept error

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

Todo App Error

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