I really like GraphiQL to play around and test my GraphQL endpoints in the browser(try a live demo here). There is only one thing I really miss and that is the option to add extra headers when sending requests to your GraphQL endpoint.
Why do I need this?
One word; security. Most of my GraphQL endpoints are secured using oAuth. This makes using GraphiQL no longer an option as every request is answered by a 401 Unauthorized response.
Luckily there are a lot of alternative libraries that offer similar functionality as GraphiQL. The one I like is GraphQL Playground.
From the documentation:
GraphQL Playground uses components of GraphiQL under the hood but is meant as a more powerful GraphQL IDE enabling better (local) development workflows. Compared to GraphiQL, the GraphQL Playground ships with the following additional features:
- Interactive, multi-column schema documentation
- Automatic schema reloading
- Support for GraphQL Subscriptions
- Query history
- Configuration of HTTP headers
- Tabs
To add a security header, open your GraphQL Playground endpoint(I’m hosting it inside my ASP.NET Core app using GraphQL.Server.UI.Playground), go to the HTTP headers section and add the following JSON (every header value is a new json property):
Now when you send a request, the headers will be included...
