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}`;
}
})
Ain't that neat? Hope this helps you save some debugging time.
Top comments (0)