Is there a way to name graphql requests in the devtool network tab?

Question

I'm using apollo as my client and I run plenty of queries and mutations on my app. I was wondering if there is a way to have each of my query/mutation displayed by its name (eg. getProduct) instead of all showing as "graph" in my network tab? I'm on Brave (Chromium).

It would make debugging easier if I didn't have to click on each one and check the headers or the response to identify which query or mutation this request corresponds to.

Here's how it currently shows in my devtools:

network tab screenshot

Thanks a lot!

Answer 1

Maybe there is a better way but here the minimal code I could do to make it.

import {
  ApolloClient,
  ApolloLink,
  HttpLink,
  InMemoryCache,
} from '@apollo/client';

const httpLink = new HttpLink({ uri: MY_BASE_URL });

const namedLink = new ApolloLink((operation, forward) => {
  operation.setContext(() => ({
      uri: `${MY_BASE_URL}?${operation.operationName}`,
    })
  );
  return forward ? forward(operation) : null;
});

export const client = new ApolloClient({
  link: ApolloLink.from([namedLink, httpLink]),
  cache: new InMemoryCache(),
});

You'll have to name your query :

import { gql } from "@apollo/client";

const QUERY = gql`
  query QueryName {
    ...
  }
`;

Hope it'll help.

Answer 2

uri prop of HttpLink can accept function which have operation as an arg so it can be done like this as well:

const httpLink = new HttpLink({ uri: (operation) => `${MY_BASE_URL}?${operation.operationName}` });