ghirro / graphql-network Goto Github PK

View Code? Open in Web Editor NEW

320.0 320.0 33.0 1.39 MB

Chrome Devtool that provides a "network"-style tab for GraphQL requests to allow developers to debug more easily.

HTML 21.50% JavaScript 78.50%

graphql-network's Introduction

graphql-network

Chrome Devtool that provides a "network"-style tab for GraphQL requests to allow developers to debug more easily.

Get it here

Why?

GraphQL is fantastic but if you're using GraphQL you've probably bumped into how horrible it is to monitor requests via the network tab:

GraphQL network allows you to actually monitor and debug network requests again, just like the good old days.

What does it do?

Gives you a concise list of all GraphQL requests that have been sent. Easy to track what you're requesting.
Gives you a raw view of the string of GraphQL being sent.
Gives you a computed view of the request as your server will interpret it. So it's easy to debug fragments.
Displays a nicely formatted response.

Screenshots

Looking through GraphQL requests.

Viewing the Raw Query

Viewing the Computed Query

Viewing the Response

I want to give it a try but don't have a GraphQL app

After installing the app, why not head over to GraphQLHub.

Troubleshooting

Not Picking Up Requests

Because of the way Chrome Devtool extensions work, you'll need to have the GraphQL tab open at the time the request is made in order for it to be displayed, it won't pick up requests in the background.

Additionally, the extension will only pick up requests that send the Content-Type header with:

application/graphql
application/json where the GraphQL query is in an object parameter called query
application/x-www-form-urlencoded where the GraphQL query is in a parameter called query

Since GraphQL is fairly new, consensus hasn't exactly been reached on the best way to make queries, if you think another way should be supported, send a PR or open an issue.

Request is being listed as a "GraphQL Error"

It's likely that your GraphQL is invalid. If you've double checked this, open up an issue.

Request is being listed as an "Internal Error"

It's likely that there's a bug in the extension. Open an issue.

Contributing

Hacking on the extension is really easy.

Clone the repo
npm install
Make your changes
webpack in the top-level directory.
Load it into chrome://extensions in the normal way.

Roadmap

Redo approach to CSS. Haven't yet had time to implement something proper.
Include variable digestion.

graphql-network's People

Contributors

Stargazers

Watchers

graphql-network's Issues

Compatibility with the Chrome Devtools Dark Theme

It works fine with the light theme but the dark theme has some problems.

[Feature request] Display response time

Would be nice to know this.

Support batched queries

Anyone who's using apollo-client and has enabled batching is going to send requests that have content-type:application/json and a request body that looks like:

[
  { query: <graphql_query1> },
  { query: <graphql_query2> },
  { query: <graphql_query3> },
]

Which this doesn't parse

[Feature request] Support for GraphQL Subscriptions

This is a request for extending the functionality to support subscriptions.

Unable to install the extension

I use Chrome 60.0.3112.78 (macOS Sierra 10.12.6). This extension doesn't seem to be compatible with Chrome anymore. When I try to install it, after a while I get the following error message:

Could not install package: 'UTILITY_PROCESS_CRASHED_WHILE_TRYING_TO_INSTALL'. Could not install package because a utility process crashed. Try restarting chrome and trying again.

Any tips? Workarounds? @Ghirro

Chrome webstore link broken

In the readme, there is a link: Get it here that goes to a 404 page.

Support form data?

Hi there! I was just trying out this extension but I found that my queries don't show up.

I see there are two ways for it to find queries: POST with a query in the JSON body; or Content-Type=application/graphql. I'm not sure if it's possible, but I'd like my queries to show up, but they work differently.

I'm using jQuery to send AJAX requests, basically like this:

$.post(
  graphqlURL, 
  {
    query: queryString, 
    variables: JSON.stringify(queryVariables)
  },
  responseHandlerFunction
)

By default, jQuery turns the parameters into Form Data, so my network tab looks like this:

(The Content-Type is application/json; charset=utf-8)

Is it possible to support this in the extension? Thanks for considering it!

Feature request: better dark theme support

Hi, thanks for the extension !
It would be nice if we could have a better support of the dev tools' dark theme, a bit hard to read right now. 😄

Add option to list urls manually to be picked up by the extension

It would be nice to add a feature, so users can list desired URLs to be processed by the extension.

API for getting data from graphql clients?

In analogy to the redux devtools middleware you can add, it would be nice to have something that you can call from the client code so that this extension gets all graphql requests as well as the result data, even when the request is done over websocket or if it was served from cache…

do u have any idea of how to integrate with react native?

Move the clear button to the top

When there is a lot of traffic we need to scroll far to get to the clear button at the bottom. It would be nice if it was fixed at the top same as for the regular network tab.