search

warrenday / graphql-network-inspector

A better network inspector for viewing and debugging GraphQL requests.
MIT License
466 stars 46 forks source link

Auto-formatting with Prettier #68

Closed ViliamKopecky closed 2 years ago

ViliamKopecky commented 2 years ago

Description

Adds support for auto-formatting GraphQL with Prettier. Closes #31

Screenshot

https://user-images.githubusercontent.com/316435/167119125-149e346c-394a-4854-a56c-0bedc686c142.mov

https://user-images.githubusercontent.com/316435/167119382-da984e7b-bf1a-4d2f-9eb3-ce2209340f0b.mov

Checklist

warrenday commented 2 years ago

Great work @ViliamKopecky thanks for doing this.

There are some situations where we also show a "copy vars" button (when query variables are available). Could you validate that the addition of the new button looks ok when all three are in place?

Potentially we can look at re-designing this layout now we have a third option. But I can follow that up in a different PR.

Screenshot 2022-05-06 at 13 50 03
ViliamKopecky commented 2 years ago

@warrenday I have put them in a line, but it may cover part of code so I added some transparency when mouse is not hovering. I think good enough for now without making much UI changes.

https://user-images.githubusercontent.com/316435/167245379-13e4ac31-67a1-4342-ba6b-7c731a75733f.mov

warrenday commented 2 years ago

Looks good to me!