How to tell GraphQL requests apart in dev tools network tab when all have identical URL?
All my requests target /api/graphql so to tell them apart I need to click each one, switch to the "Headers" tab, scroll down to the "Request Payload" section and read the query. This means that I get almost no overview among the requests so I have to click several requests before I find the one I want to inspect.
How do people solve this?
To use uri with a function to append operation name
const httpLink = createHttpLink({ uri: ({ operationName }) => {
return `/graphql/${operationName}`;
} });
from: https://github.com/apollographql/apollo-link/issues/264#issuecomment-461953427
Basically, if you're tired of this:
Use this GraphQL Network Inspector to get this:
If the link breaks in the future, just search "chrome extensions GraphQL Network Inspector".
I know someone suggested this in the question's comment, but that URL is broken.
Also, I know the op specifically clarifies that they're looking for a in-code solution for all browsers in the comments, but their original question is what I was looking for & this is my solution. This answer will be useful for people looking for this, as this extension has really helped me!
It works for me because while I do test in multiple browsers, most of my development happens in chromium. This solution works for anyone who develops the same way and using a chromium-based browser (chrome, brave, edge, etc).
I'm using Apollo, and I found some info around this here: https://github.com/apollographql/apollo-link/issues/264
The solution I went with was this query param (unused by server-side):
const customFetch = (uri, options) => {
const { operationName } = JSON.parse(options.body);
return fetch(`${uri}/graphql?op=${operationName}`, options);
};
const link = createHttpLink({ fetch: customFetch });
This solution could easily be adapted to other gql client libraries.