[graphiql] optional fetcher, user network configuration tab

[acao]

A long requested feature, and what we envisioned for the sidebar plugin ecosystem a few years ago, is a place where users can configure their environments and settings for each environment

the network tab would provide a global setting for:

• default initial headers for each operation (that would show up in the headers tab)
• HTTP POST or GET for queries? http spec
• whether to persist the headers for that environment
• whether to add Accept: application/graphql-response+json transparently

the network tab would provide per-environment settings for:

• url
• default initial headers for each operation (that would show up in the headers tab)
• HTTP POST or GET for queries? http spec
• whether to persist the headers for that environment

How will this impact GraphiQL?

• fetcher becomes optional if environments prop is provided
• environments prop looks like graphql-config object but maybe stricter (difficult to normalise every pattern)
• @graphiql/toolkit createGraphiQLFetcher() becomes an internal detail if environments prop is provided?

[acao]

Updated Proposal

Making URL a potentially internal state is the most important outcome. Other plugins can manage multiple projects,

First, the props will contain a discriminated union:

type FetcherFirst = {
 url?: string,
 subscriptionsUrl?: string
 fetcher: Fetcher
}

type UrlFirst = {
 url: string,
 subscriptionsUrl?: string
 fetcher?: Fetcher
}

FetcherFirst | UrlFirst

url state becomes a potentially dynamic internal detail:

const fetcher: Fetcher = async (graphQLParams, options) => {
  const data = await fetch(
   options.url,
    {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        ...options.headers,
      },
      body: JSON.stringify(graphQLParams),
      credentials: 'same-origin',
    },
  );
  return data.json().catch(() => data.text());
};

Context Changes:

url becomes an optional parameter to SchemaContext, which is called up when building ExecutionContext

createGraphiQLFetcher() change

url becomes an optional parameter, as this may become a dynamically supplied options.url parameter

fetcher and no url:

assumes the user has statically provided a URL to the fetcher

fetcher and url

fetcher passes url as a dynamic parameter, for example in createGraphiQLFetcher()

url and no fetcher:

url is used to generate a fetcher using createGraphiQLFetcher()

[klippx]

Our solution is to have a custom env selector between TopNav and GraphiQL components.

If env === custom, we use a "local" fetcher (directly to whatever URL you provided via browser).

If env !== custom, we use a trpc fetcher that proxies the call via our backend so we can append mandatory auth headers, etc.

Then we have to do something funky about url since it is required, like

    // Production, staging, and non-localhost custom URLs: use proxy to inject sensitive headers
    return createGraphiQLFetcher({
      url: 'unused', // Not actually used, but required by createGraphiQLFetcher
      fetch: async (_url, init) => {
        // trpc fetch code here
      },
    )

You also have to consider that switching env switches the schema you are supplying to <GraphiQL schema={...} />.
For custom it should be undefined (using introspection) but any of the other and you have to feed it the actual correct schema (fetched statically from Hive or Apollo registry, for instance)

Staging env selected

Custom env selected