13

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?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
molsson
  • 1,227
  • 11
  • 19
  • Did you research for tools to help with this? E.g. https://chrome.google.com/webstore/detail/graphql-network/igbmhmnkobkjalekgiehijefpkdemocm?hl=en-GB came up immediately. – jonrsharpe May 19 '20 at 08:39
  • I was thinking this could be solved in my code somehow so that it works in all browsers, maybe a util/library that adds a suffix to the URL or something like that. Installing a closed source Chrome extension is not an ideal solution for me. – molsson May 29 '20 at 10:36
  • Recommendations for a library would be off topic here. The GraphQL spec itself does not have specific requirements for transport, `POST /graphql` -> `200 OK` is a convention: https://graphql.org/learn/serving-over-http/. In general, if there are constraints around what *would* be an "ideal solution" they should be included in the question. – jonrsharpe May 29 '20 at 10:41
  • 1
    If instead of making the graphql request to "/graphql", I made the request to "/graphql/InsertOperationNameHere" then I would be able to tell the requests apart quite easily. Then I would have to write my server-side so that it listened to all "/graphql/*" URLs and just ignored the "/*" part of the URL. What perplexes me though, is that this seems like such a basic problem. Why doesn't everyone using GraphQL have this problem? – molsson May 29 '20 at 21:18

3 Answers3

12

Basically, if you're tired of this: devTools network graphql queries

Use this GraphQL Network Inspector to get this: GraphQL Network Inspector - list query with names GraphQL Network Inspector - readable requests GraphQL Network Inspector - readable + usable responses

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).

bot19
  • 664
  • 8
  • 18
6

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.

molsson
  • 1,227
  • 11
  • 19
6

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

zhangciwu
  • 351
  • 5
  • 8