A better DX for GraphQL Requests

If you have worked with GraphQL and been frustrated while skimming through the requests in the Network panel, you aren't alone.

I am talking about this.

This kills a lot of time while trying to find out the exact request you are looking for since the requests look all the same.

Some time ago, I decided to do something about this to make the debugging experience better and faster and I stumbled upon Apollo HTTP Link documentation.

When setting up Apollo, we provide a bunch of options and link is one of them. For HTTP Requests, we use apollo-link-http.

Especially this part.

uri: the URI key is a string endpoint or function resolving to an endpoint -- will default to "/graphql" if not specified.

The main focus here is that uri can be a function and that function receives the entire query object. That object contains things like variables and query and also the operationName.

Now, as you can imagine, that can come in handy in trying to distinguish the requests from each other.

While setting up link in apollo configuration, we can change he uri to include the operationName as a URL parameter and it comes up in the Network panel with the same.

import { createHttpLink } from 'apollo-link-http';

// In your configuration...
link: createHttpLink({
  uri: ({ operationName }) => {
    return `${options.httpEndpoint}/?gqlOp=${operationName}`;
  }
}) 

Here's the result.

Ain't that neat? Hope this helps you save some debugging time.