Add headers and onEditHeaders to Ruru object

[danzho]

Feature description

Ruru supports programmatically setting and reading the query and variables UI panes: https://github.com/graphile/crystal/blob/0f7fe2060c1d2ad50a76a1620ccc827c05bb03af/grafast/ruru-components/src/interfaces.ts#L47-L65

But it'd be nice if it also let you read/write the headers pane too.

Motivating example

Like you showed on Discord, you can write a grafserv plugin that sets the query and variables from ruru url: https://github.com/graphile/crystal/blob/fbb1b314dd90dfbc06b368c328932478bcca2a55/postgraphile/postgraphile/graphile.config.ts#L110-L166

I'd like to also be able to set the headers too. That would let me create clickable query links that also set {"Authorization": "Bearer {token}"} so that I can easily run authenticated queries without having to paste the auth token myself for debugging.

Of course, the plugin would look something like this:

const url = new URL(document.URL)
const params = new URLSearchParams(url.hash.slice(1));

const query = params.get("query");
const variables = params.get("variables");
const headers = params.get("headers"); // yay

if (query) {
  RURU_CONFIG.query = query
}
if (variables) {
  RURU_CONFIG.variables = variables
}
if (headers) {
  RURU_CONFIG.headers = headers // yay
}

[benjie]

I think specifying auth tokens via query params is very risky; but that’s by-the-bye - I have no issue with someone implementing control of headers (I’m surprised we don’t already have it infact). I’m having to be ruthless with tasks pre-v5.0 so this will be a post 5.0 feature unless someone else builds it.