Add headers and onEditHeaders to Ruru object

[danzho]

Feature description

Ruru supports programmatically setting and reading the query and variables UI panes:

crystal/grafast/ruru-components/src/interfaces.ts

Lines 47 to 65 in 0f7fe20

	/**
	* The query to prepopulate the editor with.
	*/
	query?: string;
	/**
	* The variables to prepopulate the editor with.
	*/
	variables?: string;
	/**
	* Callback executed when the current query changes.
	*/
	onEditQuery?: GraphiQLProps["onEditQuery"];
	/**
	* Callback executed when the variables change.
	*/
	onEditVariables?: GraphiQLProps["onEditVariables"];

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:

crystal/postgraphile/postgraphile/graphile.config.ts

Lines 110 to 166 in fbb1b31

	const RuruQueryParamsPlugin: GraphileConfig.Plugin = {
	name: "RuruQueryParamsPlugin",
	version: "0.0.0",
	grafserv: {
	middleware: {
	ruruHTMLParts(next, event) {
	const { htmlParts } = event;
	htmlParts.headerScripts += `
	<script>
	{
	const currentUrl = new URL(document.URL);
	const query = currentUrl.searchParams.get("query");
	const variables = currentUrl.searchParams.get("variables");
	if (query) {
	RURU_CONFIG.query = query;
	RURU_CONFIG.variables = variables;
	}
	}
	</script>
	`;
	return next();
	},
	},
	},
	};
	/**
	* Update the URL search params with the current query and variables
	*/
	const RuruQueryParamsUpdatePlugin: GraphileConfig.Plugin = {
	name: "RuruQueryParamsUpdatePlugin",
	version: "0.0.0",
	grafserv: {
	middleware: {
	ruruHTMLParts(next, event) {
	const { htmlParts } = event;
	htmlParts.headerScripts += `
	<script>
	{
	const currentUrl = new URL(document.URL);
	RURU_CONFIG.onEditQuery = (query) => {
	currentUrl.searchParams.set("query", query);
	window.history.replaceState(null, "", currentUrl);
	};
	RURU_CONFIG.onEditVariables = (variables) => {
	currentUrl.searchParams.set("variables", variables);
	window.history.replaceState(null, "", currentUrl);
	};
	}
	</script>
	`;
	},
	},
	},
	};

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.