Simplest Graphql client based on Web Components and https://github.com/rxdi/graphql-webcomponent

index.html

<script
  type="text/javascript"
  src="https://rawcdn.githack.com/rxdi/graphql-webcomponent/dd8686a81f88ba481d3b4d22d2459bfcbdcff9ed/dist/regular/0.0.15.js"
></script>

<setup-graphql
  uri="https://countries.trevorblades.com/"
  pubsub="wss://pubsub.youvolio.com/subscriptions"
></setup-graphql>

<script>
  const el = document.querySelector('setup-graphql');
  el.onRequest = async function() {
    return new Headers();
  };
  el.loading = () => {
    return 'Loading...';
  };
  el.error = e => {
    return e;
  };
  el.ready();
</script>

<script>
  Component({
    selector: 'app-component',
    template() {
      return html`
        <r-part>
          <r-settings .value=${{ fetchPolicy: 'cache-first' }}></r-settings>
          <r-fetch .query=${`{ continents { name } }`}></r-fetch>
          <r-render .state=${({ data: { continents } }, setState) => html`
            <r-for .of=${continents}>
              <r-let .item=${({ name }) => name}></r-let>
            </r-for>
          `}>
          </r-render>
        </r-part>
      `;
    }
  })(class AppComponent extends LitElement {});
</script>

<app-component></app-component>