enkot / querio

Missing DevTools network inspector for GraphQL and HTTP requests

Querio

Missing DevTools network inspector for GraphQL and HTTP requests

Features

❤️ Lightweight: Crafted with minimalistic UI design.

📡 Request: Intercepts GraphQL and raw HTTP requests in real time.

📃 Formatting: Automatically formats request and response.

🗄️ GraphQL: Batch requests.

🌈 Theme: System preference, Light or Dark.

Contributing

Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.

Changelog

See the CHANGELOG file for details.

License

This project is licensed under the MIT License — see the LICENSE file for details.

querio's Issues

No support for batched GraphQL requests

GraphQL requests don't show up in Querio if they contain batched queries/mutations. Queries sent solo (without batching) do appear in Querio.

From https://www.apollographql.com/blog/apollo-client/performance/query-batching/#transport-level-batching

Example Request:

[
  {
    query: <query 0>,
    variables: <variables for query 0>
  },
  {
    query: <query 1>,
    variables: <variables for query 1>
  },
  ...
  {
    query: <query n>,
    variables: <variables for query n>
  }
]

Example Response:

[
  <result for query 0>,
  <result for query 1>,
  ...
  <result for query n>
]

This is most likely the cause of #12 as well

Getting blank screen in incognito mode

Even after enabling the extension for incognito mode in chrome, the extension doesn't work in that mode. The dev tools view for the extension is blank

Feature request: WebSocket trace, including GraphQL subscriptions

It's possible to show also GraphQL subscriptions messages?

Last request mode

Is it possible to add a togglable mode during which the newest request is automatically selected?
Sometimes one needs to inspect one request multiple times in different circumstances.
That toggler would help a ton.

In my opinion the best place to put the toggler icon would be next to the 'Clear' icon

or somewhere in the settings modal

Wasted space in vertical split view

When using a vertical split view for devtools, Querio "wastes" a whole column of precious screen real estate simply to show the Q icon at the top, and a gear icon at the bottom.

If future intent is to add more stuff in that column, then I guess its not so bad -- but at least the way things stand now, it'd be great if that column could be used for actual content.

Suggestion: you've already got the Q branding on each request, so drop the Q logo entirely, and add the gear icon next to the clear button on the bottom of the request list. It makes more sense to be separate as the settings are not specifically related to the request list, but space is precious in dev tools and that's a worthwhile trade-off IMHO.

[Feature]: Reimplement search

The same way it is done for Hoppscotch. Panel on the top.

Add support for application/graphql-response+json

The preferred content type header for GraphQL server responses is now application/graphql-response+json. The current content type header checks only support application/json, resulting in a cant't parse response content error. The fix is pretty easy. I’ll have a pull request for this momentarily.

Love this tool, by the way. Gotten a lot of good use out of it over the last couple of years. Thanks for sharing it.

No requests show in GQL

What info can I provide to debug this?

Prettify does not handle long inputs

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

Suggestion: Prettier formats GraphQL very nicely, including inputs, if you wanted to leverage that. It also handles comments and indentation properly. Several other GraphQL tools I use are moving to using prettier for formatting, for exactly this reason. Example: Kong/insomnia#3242.

Need indication of request errors

If the request ended with an error, you need to see it in the list (red color or icon)

https://live.staticflickr.com/65535/51584578844_5c968646d8_o.png

Feature Request: Global search.

querio is the most beautiful graphql extension. I think the only thing not better than is lack global search ability.

Feature request: graphQL Multipart file upload

Feature request: graphQL Multipart file upload

Whether it can be displayed in the same way as normal,
Don't let the file upload form ruin reading

use graphql-upload package

Feature Request: Prettify/Indent the queries, mutations and subscriptions in the inspector

There should an option to prettify/indent a query/mutation/subscription when viewing it in the inspector. Most of the time the queries used by the client is minified or without identation. This makes the query difficult to read in the inspector as well.

Would be happy to work on this as well.

The Theme setting is not saved

Whatever setting I choose, Querio always loads with Dark theme.

Can you add a licence file to the repository?

It would be beneficial to have a LICENSE file in the repo sitting the actual licensing of the repo, especially when installing it in some enterprise settings where all application licenses are monitored.

Could you please add a LICENCE file with the appropriate license?

Response is not formatted

Querio v1.0

Road to Querio v1.0 😎

Reimplement almost from scratch:

• Fresh look 🎨
• Simplified and improved requests parsing
• Manifest V3
• Typescript
• Vue 3 + Vite
• UnoCSS
• RadixVue primitives

New features:

• Last request mode - #10
• GraphQL HTTP batching - #17
• Preflight headers for request/response - #19
• Reimplement search - #20

[Feature]: Show preflight request headers

Because preflight (OPTIONS) request doesn't have any payload for request/response it is enough to add posiblity to show preflight headers for request/response