Skip to content

Instantly share code, notes, and snippets.

@Stradivario
Last active December 24, 2019 11:44
Show Gist options
  • Save Stradivario/8ab48d1efbad77a1c391d6e0b0930e06 to your computer and use it in GitHub Desktop.
Save Stradivario/8ab48d1efbad77a1c391d6e0b0930e06 to your computer and use it in GitHub Desktop.
Simplest Graphql client based on Web Components and https://github.com/rxdi/graphql-webcomponent
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment