{"id":13472834,"url":"https://github.com/Ghirro/graphql-network","last_synced_at":"2025-03-26T17:31:20.746Z","repository":{"id":5873709,"uuid":"54124370","full_name":"Ghirro/graphql-network","owner":"Ghirro","description":"Chrome Devtool that provides a \"network\"-style tab for GraphQL requests to allow developers to debug more easily.","archived":false,"fork":false,"pushed_at":"2022-12-08T17:15:48.000Z","size":1427,"stargazers_count":321,"open_issues_count":26,"forks_count":33,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-10-30T05:26:18.658Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ghirro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-17T14:27:07.000Z","updated_at":"2024-08-29T08:57:04.000Z","dependencies_parsed_at":"2023-01-11T17:01:44.163Z","dependency_job_id":null,"html_url":"https://github.com/Ghirro/graphql-network","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ghirro%2Fgraphql-network","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ghirro%2Fgraphql-network/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ghirro%2Fgraphql-network/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ghirro%2Fgraphql-network/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ghirro","download_url":"https://codeload.github.com/Ghirro/graphql-network/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245702248,"owners_count":20658573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T16:00:58.345Z","updated_at":"2025-03-26T17:31:20.402Z","avatar_url":"https://github.com/Ghirro.png","language":"JavaScript","readme":"# graphql-network\r\n\r\nChrome Devtool that provides a \"network\"-style tab for GraphQL requests to allow developers to debug more easily.\r\n\r\n[Get it here](https://chrome.google.com/webstore/detail/igbmhmnkobkjalekgiehijefpkdemocm)\r\n\r\n## Why?\r\n\r\nGraphQL is fantastic but if you're using GraphQL you've probably bumped into how horrible it is to monitor requests via the network tab:\r\n\r\n![Which one do I click?](http://bwes.co/whichone.png)\r\n\r\n![How do I read that?](http://bwes.co/errr.png) \r\n\r\nGraphQL network allows you to actually monitor and debug network requests again, just like the good old days. \r\n\r\n## What does it do?\r\n\r\n* Gives you a concise list of all GraphQL requests that have been sent. Easy to track what you're requesting.\r\n* Gives you a raw view of the string of GraphQL being sent.\r\n* Gives you a computed view of the request as your server will interpret it. So it's easy to debug fragments.\r\n* Displays a nicely formatted response.\r\n\r\n### Screenshots\r\n\r\n#### Looking through GraphQL requests.\r\n![Easy to navigate list](http://bwes.co/easy-to-navigate.png)\r\n\r\n\r\n\r\n#### Viewing the Raw Query\r\n![Post Body](http://bwes.co/post-body.png)\r\n\r\n\r\n\r\n#### Viewing the Computed Query\r\n![Computed Fragments](http://bwes.co/compute-fragments.png)\r\n\r\n\r\n\r\n#### Viewing the Response\r\n![Response Data](http://bwes.co/response-data.png)\r\n\r\n## I want to give it a try but don't have a GraphQL app\r\n\r\nAfter installing the app, why not head over to [GraphQLHub](http://graphqlhub.com).\r\n\r\n## Troubleshooting\r\n\r\n### Not Picking Up Requests\r\n\r\nBecause 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.\r\n\r\nAdditionally, the extension will only pick up requests that send the `Content-Type` header with:\r\n* `application/graphql`\r\n* `application/json` where the GraphQL query is in an object parameter called `query`\r\n* `application/x-www-form-urlencoded` where the GraphQL query is in a parameter called `query`\r\n\r\nSince 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.\r\n\r\n### Request is being listed as a \"GraphQL Error\"\r\n\r\nIt's likely that your GraphQL is invalid. If you've double checked this, open up an issue.\r\n\r\n### Request is being listed as an \"Internal Error\"\r\n\r\nIt's likely that there's a bug in the extension. Open an issue.\r\n\r\n\r\n## Contributing\r\n\r\nHacking on the extension is really easy.\r\n\r\n* Clone the repo\r\n* `npm install`\r\n* Make your changes\r\n* `webpack` in the top-level directory.\r\n* Load it into `chrome://extensions` in the normal way.\r\n\r\n## Roadmap\r\n\r\n* Redo approach to CSS. Haven't yet had time to implement something proper.\r\n* Include variable digestion.\r\n","funding_links":[],"categories":["JavaScript","Tools"],"sub_categories":["Julia Libraries","Crystal Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGhirro%2Fgraphql-network","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGhirro%2Fgraphql-network","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGhirro%2Fgraphql-network/lists"}