Build high-performance #GraphQL web apps using #webcomponents with Apollo Elements
- Tweets118
- Following21
- Followers115
- Likes134
ALT import { ApolloQueryController } from '@apollo-elements/core'; import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; import { HelloQuery } from './Hello.query.graphql'; @customElement('hello-query') export class HelloQueryElement extends LitElement { query = new ApolloQueryController(this, HelloQuery); render() { const greeting = this.query.data?.greeting ?? 'Hello'; const name = this.query.data?.name ?? 'Friend'; return html` <article class=${classMap({ skeleton: this.query.loading })}> <p id="error" ?hidden=${!this.query.error}>${this.query.error?.message}</p> <p> ${this.query.data?.greeting ?? 'Hello'}, ${this.query.data?.name ?? 'Friend'} </p> </article> `; } }
ALT // Lit import { LitElement, html } from "lit"; import { ClockController } from "./clock-controller"; export class ClockElement extends LitElement { clock = new ClockController(this); render() { return html`Current time (Lit): ${this.clock.value}`; } } customElements.define("clock-element", ClockElement);
ALT // Vue <template> <div id="app">Current time (Vue): {{ clock.value }}</div> </template> <script> import "./clock-element"; import { ClockController } from "./clock-controller"; import { makeVueController } from "./vue-controller-host"; export default { name: "Clock", setup() { return { clock: makeVueController((host) => new ClockController(host)), }; }, }; </script>
