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

user_10600896 0
Viewed 837

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!

apollo-client apollo graphql devtools
2 Answers

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.

user_97229500

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}` });
user_95090120
Related