Create GraphQL Playground query/mutation calls via Url

Hi guys,

i noticed that it is possible to have an url definition which allows me to setup a query or mutation and it will be recognised by the GraphQl Playground. For exmaple /?query=mutation register {registerContact(firstName:test)}.

The result looks like this.

Now i would like, to define also the http headers via the url…is this possible? if yes, how?

The reason is, i would like to have some kind of documentation for my api with links to my graphql playground. This links should prepare the query or mutation within my playground, so that the user only has to press the execute button.

Hope my question is understandable…

thanks

br, Michael

It’s really nice to have the sort of simplicity you’re suggesting from documentation!

I’m not aware of a way to that with graphql-playground itself, but I believe that Apollo Studio Explorer has some beta features which will allow setting graph-level headers in its query view. Would something like that be what you were looking for?

I just randomly came across something that might help here:

https://stackoverflow.com/a/63159193

1 Like

Interesting! So what this shows is that even though it’s not documented in GraphQL Playground’s documentation, passing JSON of key/value pairs in the headers query string parameters just works. That’s news to me!

Put another way, the instructions in the StackOverflow answer aren’t necessary, this just works even with the default configuration of Playground that ships with Apollo Server.

For example, this just works:

http://localhost:4000/graphql?headers={"key1":"value1"}

Note: You should still use encodeURIComponent to account for items that need to be escaped in URL query parameters.

Also: It’s worth a small warning to be cautious about encoding things like API keys in this manner since GET parameters are cached into browser history.

1 Like