warrenday / graphql-network-inspector Goto Github PK

Is your feature request related to a problem? Please describe.
I often find myself debugging different accounts within our system for various reasons. As a result, I frequently find myself manually decoding JWTs from the Authorization header's Bearer token.

Describe the solution you'd like
I would love it if there were some quick way to decode the JWT from the Authorization header.

Describe alternatives you've considered
Doing it manually.

Make it easy to compare queries and mutations.

This is a really helpful extension to see the names of queries. I've been using this for some time. However, if we have the following things then it can improve the overall dev experience.

1. When the query/mutation is selected, It would be nicer to have setting to keep the close icon (x) on the left side. Similar to what we have in the Network tab which makes it easier to close or navigate to the list page.
2. Can we have the query variables in "Request payload" at the top? More often the queries are constructed with fragments and it is longer, if we want to only check the requested variables in query then we need to scroll all the way to the bottom. However, if it seems depend on personal preference, good to have a setting to modify it.
3. Can't easily distinguish Query and Mutation without looking at icon symbol, It would be great if the swapping of foreground and background colors are possible for icon.
4. The more we have similar look of Chrome's network tab, the more it feels easier. (like bg color, formatting, indentation etc.)

I'm sorry for a stupid question but how do I use the extension? I've added it to Chrome Canary, it is activated but I don't see it anywhere in the UI. Should it be somewhere in DevTools? Should it be activated via some button somewhere?

Sorry if I'm missing something obvious.

Is your feature request related to a problem? Please describe.
I have to copy current requests from my app in GraphQL Network Inspector into GraphiQL for debugging or iteration. It would be nice to have this convenience to copy that input.

Describe the solution you'd like
Add a button next to COPY for COPY INPUT. Possibly change COPY to COPY REQUEST for disambiguation.

Describe alternatives you've considered
Scrolling to the bottom of the Request, selecting all, and CMD-C.

Additional context

In case one tries to add " " many empty spaces to the filter input, it fails to parse it as "".

Its hard to read GQL requests with long inputs, because the input is all on a single line. It would be great if inputs were formatted multi-line to make the request easier to read.

Is your feature request related to a problem? Please describe.

Like the network tab, we could make use of expand/collapsible buttons:

• for request/response headers section
• for sections on RequestView (Query, Variables, Extensions)

Describe the solution you'd like

Example of the network tab:

Describe the bug
As a user, I would like to copy value of the authorization header in the same way as I can do with the other headers in Request Headers

To Reproduce
Select some query or mutation which includes authorization header.

1. Go to Headers tab
2. Click on authorization header
3. Value is not copied.

• OS: [e.g. macOS]
• Chrome Version: 109.0.5414.87 (Official Build) (arm64)

The chrome extension permission for access to data of all websites sounds a bit scary so why not enable the chrome extension feature for setting up specific sites the extension can be active on or on click. It looks like react dev tools does this.

Is your feature request related to a problem? Please describe.
I often find it challenging to organize and locate specific information within a large dataset or table. It becomes particularly problematic when I cannot sort the data based on a specific column.

Describe the solution you'd like
I would like the ability to sort a column in ascending or descending order within a dataset or table. This feature would greatly enhance the usability and efficiency of data analysis and management tasks.

Describe alternatives you've considered
Currently, I manually rearrange the data or create custom scripts to sort columns in different ways. However, these alternatives are time-consuming and prone to errors. Having a built-in sorting functionality would streamline the process and provide more accurate results.

Additional context
It would be beneficial if the sorting feature allows for sorting by multiple columns simultaneously. This would enable more complex sorting scenarios, where I can prioritize different criteria in the dataset.

See the GET section of https://github.com/graphql/graphql-over-http/blob/main/spec/GraphQLOverHTTP.md for the convention of the serialization format when GET is used instead of POST.

Is your feature request related to a problem? Please describe.
I'm very frustrated by the fact when I'm testing and want to cover error cases can't block specific queries/mutations. Blocking API endpoint would not work here as everything will be blocked

Describe the solution you'd like
A clear and concise description of what you want to happen.
I would like to be able to click on any operation name from the list and just block it for or block it for x amount of time.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
n/a

Additional context
Add any other context or screenshots about the feature request here.
n/a

Just wondering if this thing can work on pages rendered server side

Is your feature request related to a problem? Please describe.
I am experiencing a similar issue to one previously reported #98 , but in this case, it is with 'multipart/form-data' in our GraphQL requests. Our system is attempting to implement FileUpload following the https://github.com/jaydenseric/graphql-multipart-request-spec, but because the request format is not JSON, JSON.parse fails at graphqlHelpers.ts:L211.

Describe the solution you'd like
I would like to suggest a similar solution to the one proposed for 'x-www-form-urlencoded' request payloads. We could try to decode the payload as 'multipart/form-data' as a failover if JSON.parse fails.

Additional context
I have prepared a demo of the environment where the error occurs at https://gql-file-upload-minimum-example.vercel.app/. I would be glad to contribute towards this change if the maintainers are okay with it.

The extension doesn't log network requests if the tab is not focused. It means you have to refresh to get the log. Making it eager should fix it.

Is your feature request related to a problem? Please describe.
Persisted queries are a production way to serve graphql, but they don't show up in the inspector

Describe the solution you'd like
Support showing persisted queries

Describe alternatives you've considered
Reading the network tab

Additional context
Can try this by going to twitter.com

Describe the bug
The extension icon is grayed out and says "Can't read or Change site's data". I've tried quitting and re-opening chrome, not working. I've also tried Chrome Canary and Firefox, all with the same issue.

To Reproduce
Steps to reproduce the behavior:

1. install GraphQL Inspector chrome extension
2. Click on extension icon

Expected behavior
Not grayed out, and show a tab in the developer console.

Screenshots

Desktop (please complete the following information):

• OS: macOS 13.1
• Chrome Version: Version 110.0.5481.100 (Official Build) (arm64)

If one decides the product isn't for them, it's unclear how to uninstall it.

Add to the readme:

1. Instructions for removing the SSL certificate
2. Instructions for removing the proxy (which sometimes stays checked in Network Preferences.)

When going through this site: https://demo.saleor.io/ there is a slight mistake in that the name of fragment is displayed instead of the name of the mutation

Bug Behavior:
Mutation name displayed as "Price"

Price is a fragment used by the mutation not he main mutation.

Expected Behavior:
Mutation name displayed as "UpdateCheckoutShippingMethod"

Clicked on a request and the inspector tab goes totally blank. No errors in the console.

Hi
Thanks for doing this, looks really useful.

We add debugging information in the request query string. E.g. /graphql?id=abc this helps us a lot to find where a graphql request originates from.

It would be really useful if this extension would display the request url in the left panel.

Thanks

A bit of an edge case, but without being able to filter a service worker proxy requests, they appear twice in the log. We can use the same filter flag that Chrome devTools uses -is:service-worker-initiated. See https://stackoverflow.com/a/55733776/4106263.

Describe the solution you'd like
Very simple... adding scroll bar :)

Additional context
This happens when the request content is very long.
I am using this extension on Brave Browser on xubuntu distro.

For example -that you can test-:

Is your feature request related to a problem? Please describe.
I want to use this tool in the react native debugger

Describe the solution you'd like
a tab in the developer console just like in a browser :) I'm using relay so can't use the apollo dev tools which integrate with react-native-debugger

Additional context
apollo dev tools integration https://www.apollographql.com/docs/react/integrations/react-native

relevant links:

publishing apollo-dev-tools as npm package apollographql/apollo-client-devtools#160
PR adding react-native-debugger to apollo dev tools apollographql/apollo-client-devtools#165
PR adding apollo dev tools to react-native-debugger jhen0409/react-native-debugger#298

Is your feature request related to a problem? Please describe.

Take advantage of the Vite ecosystem (Vite, Vitest, etc...) by migrating from cra to Vite. This will improve compile time and should also reduce bundle size.

@warrenday I don't know if you use special features of CRA. If you use any, that could be interested to list them here.

Describe the solution you'd like
Thank you for your extension! I'm a big fan of using it on Chrome and was hoping you would consider a release on firefox as well 🙏

Describe alternatives you've considered
There are no other firefox addons with this level of polish and productivity.

Are there any plans to support inspecting GQL subscriptions in addition to queries and mutations?

Suppose you find a request in the sidebar and you'd like to view its response, you'd have to click on it in the sidebar, click on the Response tab, and then click on the response object to view/traverse it.

Since this is a pretty common use-case I suggest the following:

When the user double clicks a sidebar list item, the item's Response tab should immediately open, with the response object either fully expanded, or only the root level expanded and the root key focused, leaving you where you can just use the keyboard arrow keys to traverse the object.

Possible improvements on top of that:

• Double click - expands the response object's root level key
• Triple click - fully expands the response object
• Hitting the Escape key while a response object is focused should move the focus back to the sidebar requests list
• Hitting the Enter key while focused on a sidebar list item would do the same as double clicking on it (i.e, open Response tab, focus on the response object and expand its root level)

@warrenday, what do you think?

I'll have a PR ready not long after you'll approve 🙂

Is your feature request related to a problem? Please describe.

Instead of asking for screenshots on each PR, you can enable Vercel Deployment on your repository so that you can interact directly with a preview environment.

Here is how it works: https://vercel.com/features/previews

You can also use the new feature where you can write comments on the preview environment, like if you want to discuss about the design of a component for example.

@warrenday You are 3 clicks away from enabling Vercel on your repository and it is totally free for this kind of project.

Describe the bug
After the most recent update, I am unable to use the internet on my laptop without the graph proxy desktop application open

To Reproduce
Steps to reproduce the behavior:

1. Close Graph Proxy desktop application
2. Attempt to visit any website

Expected behavior
I should be able to visit the website, instead I see what's in the screenshot down below

Screenshots

Desktop (please complete the following information):

• OS: macOS 12.4
• MacBook Pro (16-inch, 2021) w/ Apple M1 Pro Chip

Additional context
Please advise on how to do a complete uninstall until the bug can be fixed

Describe the bug
The extension in question appears as disabled and no requests are written when opening GraphQL (F12)

To Reproduce
Just install the plugin and make a request

Screenshots

• OS: [Ubuntu 20.04]
• Chrome Version [12.0.5615.49 (Official Build) (64-bit)]

Seems our web application is polling or something, so lots of queries constantly. It'd be nice to be able to check a box just to see mutations.

Great work on this very much needed extension. I ran into an issue where it doesn't clear the log on refresh. I'm sure it's an easy fix.

Describe the bug
The GraphQL tab no longer appears in Chrome DevTools. Closing and opening the Dev Tools (F12) multiple times will usually make it appear but today nothing is working. It has worked perfectly until 2-3 weeks ago

To Reproduce

1. Go to a page using GraphQL in Chrome. 2) Hit F12.
2. Dev Tools appear
3. GraphQL tab does not appear

Expected behavior
Grpah QL tab will appear in DevTools on Chrome

Desktop (please complete the following information):

• OS: Mac OS Monterey 12.3
• Chrome Version 99.0.4844.83 (Official Build) (x86_64)

Hey @warrenday, happy to be here again 😄

Is your feature request related to a problem? Please describe.
When inspecting Queries/Mutations and want to copy headers of that call for using it in the GQL playground, it copies in the clipboard an array of headers that is the wrong format for the playground because it requires an object

Describe the solution you'd like
The copy button copies an object not an array of values

Additional context

Happy to open a PR for this if u think it could be a good idea,
dunno what was the reason for that choice, maybe postman &co. prefer that format!

WDYT?

Is your feature request related to a problem? Please describe.
If the request is really large, there is often the need to scroll down quite a bit until you can view the vars section. It currently happens when your query has lots of fragments that contain fragments etc.

Describe the solution you'd like
I can think of a few of solutions, sorted in order of difficulty and or functionality.

• Make a new separate tab just for Vars
• Move the vars to the top, above the query
• Make it so clicking on the Copy Vars button, also jumps to the section where the vars are shown.

Also open to any other suggestions or ideas.

Hey, Warren nice to meet you! ✋

First of all thanks for this extension! It was very helpful to me!

The only inconvenient thing I noticed in the day-to-day use, is the "clear button" that jumps at the end of the screen when you close the details of a request and return on the left when you open again the details.

If you like the fix I've made already a PR 👍

First off I will say this tool is excellent! I had one minor suggestion:

Would it be possible to add a way to display the http headers and associated information by either linking back to the basic "network" tab in chrome, or displaying the information in some kind of drop down or menu?

As it is currently viewing the headers requires switching back to the network tab and sifting through the list to find the network request which matches the GraphQL operation you just viewed.

Thank you very much for such a well done extension, it's become indespensible to me. Just wanted to throw in two features that would be amazing to have: response time and payload size.

I don't know if I'll have time to get to it myself the next couple of months though, so feel free to close if this is just an annoying issue.

For easy searching within a request/response.

I am on version 1.6 and I am still having the issue that the left column is displaying one of the fragment names instead of the query or mutation name.

Is your feature request related to a problem? Please describe.
From what I've experienced & tested, it seems like this extension expects the request payload of the graphql request to be application/json. In our case, we send the graphql requests with application/x-www-form-urlencoded payloads.

This breaks the request check as the JSON.parse on request body text fails, resulting in null which ignores the request completely. (Correct me if I am wrong here?)

Describe the solution you'd like
To allow form-encoded request bodies along with usual json ones, we can try to decode the payload as form-data as a fail-over once direct JSON.parse fails.
That's a preliminary thought & will require checking the feasibility with rest of the code before we decide on approach. That said, I would love to contribute towards this if maintainers are okay with the change.

Describe the solution you'd like
It would be nice to have a flame chart / tracing tab.

This would only work when tracing is on but I tend to keep tracing on in development.

Describe alternatives you've considered
Playgrounds have tracing. Logging tools can create flame charts / tracing.

Describe the bug
In chrome devtools I'm able to identify network requests that are stuck in pending but in this extension (as good as it is) I'm not able to see that pending request until after it is resolved and returns 200 OK to my browser.

To Reproduce
Create a demanding query resolver and make a request to it from the frontend while having your devtools open. Compare the results from the built-in Network tab vs GraphQL Network tab.

Expected behavior
To see a behavior like the native Network tab, i.e. the pending requests show up as pending.

Screenshots

Built-in Network	GraphQL Network

Desktop (please complete the following information):

• OS: Windows 11 Version 22H2 (Build 22621.1105)
• Chrome Version: Vivaldi Version 5.6.2867.62 (Stable channel) (64-bit)

Great tool, but since yesterday can´t open details of query / mutation, just empty window..

While inspecting the app, the console shows:

Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys ()
at main.84ea91ac.chunk.js:1
at Array.map ()
at re (main.84ea91ac.chunk.js:1)
at Xi (153.37de9f8c.chunk.js:2)
at wl (153.37de9f8c.chunk.js:2)
at gu (153.37de9f8c.chunk.js:2)
at mu (153.37de9f8c.chunk.js:2)
at lu (153.37de9f8c.chunk.js:2)
at 153.37de9f8c.chunk.js:2

Tried on more than one website, restarted the computer, etc..

chrome Version 92.0.4515.107 (Official Build) (64-bit)

Describe the bug
I cannot get all POST request by using graphql network. I saw some other POST request using Network by Chrome inspector, but not showing on graphql network.

**Desktop (please complete the following information): Macbook Pro M2

• OS: MacOS
• Chrome Version: 114.0.5735.106

Hey @warrenday !
I'm here again 😄

I would like to discuss to discuss about another improvement that could probably make sense(?)

When we have a bunch of requests grouped is hard to find the wanted one.

How about having the response key outside at the level or as a replacement of "1 item"

• similar regex functionality as in chrome's devtools

Another important feature that's currently missing.