[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()