Discussion: Modernization

This is merely a rough draft for a foundation of discussion

Design Criteria

Before getting into design details I think it’s worth while to provide a definition of graphiql in order to provide context for this design; graphiql: An in-browser IDE for exploring GraphQL.

This definition means that graphiql can be split into two components: ui and business logic (i.e. http req/resp). The primary use case for graphiql (in my opinion) is for development/testing of a graphql service, which means assuming an offline environment is not too far of a reach.

Now, equipped with the criteria of providing a ui, business logic (http req/resp), and an offline experience, what follows is my proposal for redesign. (Note: the current design does satisfy all of these criteria)

Design Proposal

Web Component

In line with the current design, a web component (built with StencilJS?) will be provided to allow for embedding of graphiql into another project. The exported component need not be a web component, per se, it could still just be a React component, but a web component would be more framework neutral.

One major difference will be that the component must be provided an http client object instead of the fetcher function. A default client will also be exported.

Default Environment

A default graphiql app would be hosted on github pages at https://graphiql.github.io. The main ui of the site will be the graphiql component but combined with a form input field to change the graphql http endpoint. The schema would then be loaded from this endpoint through introspection.

<form>
  Endpoint: <input typ="text" name="endpoint"/>
</form>

<graphiql endpoint=endpoint></graphiql> <!-- Web component -->
<!-- Have a script tag update endpoint value and the web component should rerender itself -->

To support offline development, instead of requiring developers to spin up there own server just to display graphiql, a Service Worker will be registered to cache all assets associated with graphiql.github.io.

[imolorhe]

GraphiQL.github.io is not ours: https://github.com/graphiql/graphiql.github.io

I think this is a case that should be potentially reported to Github? Anyone could easily fall for thinking that URL belongs to the graphiql team. Looks like a clear case of impersonation to me.

[benjie]

GraphiQL.github.io is not ours: https://github.com/graphiql/graphiql.github.io

We’re not planning to move this specific project away from React, but with the v1 rearchitecture overhaul we’re aiming to make GraphiQL even more modular so you can reuse parts of it to build your own web component editor.