https://github.com/dielduarte/graphql-devtools
WIP a frameworkless Graphql dev tool focused in a good DX and simplicity - written in TS and state machines just for fun
https://github.com/dielduarte/graphql-devtools
hacktoberfest
Last synced: 10 months ago
JSON representation
WIP a frameworkless Graphql dev tool focused in a good DX and simplicity - written in TS and state machines just for fun
- Host: GitHub
- URL: https://github.com/dielduarte/graphql-devtools
- Owner: dielduarte
- Created: 2019-11-16T21:16:02.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2023-05-07T07:27:35.000Z (almost 3 years ago)
- Last Synced: 2024-04-14T08:30:44.369Z (almost 2 years ago)
- Topics: hacktoberfest
- Language: TypeScript
- Homepage:
- Size: 1.22 MB
- Stars: 24
- Watchers: 3
- Forks: 4
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Graphql-devtools
The frameworkless graphql devtools, focusing in a good DX
# Development
All we have to do is install the dependencies:
```sh
$ yarn
```
Then run our development server:
```sh
$ yarn start
```
Then load the extension in your Chrome browser:
1. Access `chrome://extensions`;
2. Enable the `Developer mode` (top-right corner);
3. Click on `Load unpacked`;
4. Select the `graphql-devtools/build` dir.
Finally, open any website running GraphQL, open your DevTools and then select the `GraphQl` tab.
> Later we might discuss the possibility of introducing a sample webpage as well with a few buttons to perform different requests, so that we don't have to open a random website to test our extension.
### Every change still needs a manual work
Due the way extensions work, on every change, we still need to do some manual work.
In the app running inside the `GraphQl` tab, right-click and then select `Reload frame`. It will reload the extension page with any updated code.