How to tell GraphQL requests apart in dev tools network tab when all have identical URL?

Question

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?

Answer 1

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