Apollo Elements - GraphQL Web Components

ALT <apollo-client uri="https://api.spacex.land/graphql"> <apollo-query> <script type="application/graphql" src="NextLaunch.query.graphql"></script> <template>{%raw%} <h2>{{ data.launchNext.mission_name }}</h2> <p>launches from <em>{{ data.launchNext.launch_site.site_name }}</em> aboard <em>{{ data.launchNext.rocket.rocket_name }}</em></p> </template>{%endraw%} </apollo-query> </apollo-client>

ALT 🦋 success packages published successfully: 🦋 @apollo-elements/atomico@0.0.0-next.3 🦋 @apollo-elements/components@2.0.0-next.9 🦋 @apollo-elements/core@0.1.0-next.7 🦋 @apollo-elements/fast@2.0.0-next.8 🦋 @apollo-elements/gluon@4.0.0-next.6 🦋 @apollo-elements/haunted@2.0.0-next.5 🦋 @apollo-elements/hybrids@4.0.0-next.5 🦋 @apollo-elements/lit-apollo@4.0.0-next.8 🦋 @apollo-elements/mixins@4.0.0-next.7 🦋 @apollo-elements/polymer@4.0.0-next.5

ALT Screenshot of chat screen with javascript disabled: Apollo Elements 3 minutes ago Write GraphQL in HTML with Apollo Elements HTML-FTW 3 minutes ago Use plain HTML to define GraphQL templates and operations noscript-noproblem a minute ago Even works without JavaScript on Chromium browsers with SSR 🤯 Apollo Elements a minute ago Are GraphQL web components the future of your front end? Apollo Elements 57 seconds ago Check out Apollo Elements - https://next.apolloelements.dev

ALT Devtools screenshot showing declarative shadow roots, even though JavaScript is off

ALT Screenshot of lighthouse showing scores: performance: 96 accessibility: 100 best practices: 100 seo: 100

ALT @customElement({ name, styles, template }) class Launches extends FASTElement { launches = new ApolloQueryBehavior(this, LaunchesQuery, { variables: { limit: 3 } }); onLimitChange(event) { this.launches.variables = { limit: parseInt(event.target.value) }; } }

ALT npm i -S @apollo-elements/core

ALT <apollo-query id="leeway-userlist"> <script type="application/graphql" src="Users.query.graphql"></script> <template> <link rel="stylesheet" href="components/shared.css"/> <link rel="stylesheet" href="components/userlist.css"/> <template type="if" if="{{ error }}"> <aside id="error"> <h1>😢 Such Sad, Very Error! 😰</h1> <pre>{{ error.message || 'Unknown Error' }}</pre> </aside> </template> <header> <span role="presentation" class="status {{ data.localUser.status }}"></span> <span class="nick">{{ data.localUser.nick ?? 'Users' }}</span> </header> <template type="repeat" repeat="{{ data.users ?? [] }}"> <template type="if" if="{{ item.id !== data.localUser.id }}"> <div class="user"> <span aria-label="{{ item.status }}" class="status {{ item.status }}"></span> {{ item.nick ?? '' }} </div> </template> </template> </template> </apollo-query>

ALT import { useQuery, component, html } from '@apollo-elements/haunted'; import { LaunchesQuery } from './Launches.query.graphql.js'; function Launches({ document = null, variables = null }) { const { data } = useQuery(LaunchesQuery, { variables: { limit: 3 } }); const launches = data?.launchesPast ?? []; return html` <link rel="stylesheet" href="launches.css"/> <ol> ${launches.map(x => html` <li> <article> <span>${x.mission_name}</span> <img .src="${x.links.mission_patch_small}" alt="Badge" role="presentation"/> </article> </li> `)} </ol> `; } customElements.define('spacex-launches', component(Launches));

ALT <apollo-client uri="https://api.spacex.land/graphql"> <apollo-query> <script type="application/graphql" src="queries/LatestLaunch.graphql"></script> <template> <link rel="stylesheet" href="components/spacex-launch.css"/> <article class="{{ data ? 'resolved' : 'loading' }}"> <h2>Latest Launch</h2> <img .src="{{ data.launchLatest.links.mission_patch }}" alt="mission patch"/> <p> Mission {{ data.launchLatest.id }}, <strong>{{ data.launchLatest.mission_name }}</strong> Launched <time>{{ data.launchLatest.launch_date_utc }}</time> aboard <strong>{{ data.launchLatest.rocket.rocket_name }}</strong> </p> </article> </template> </apollo-query> </apollo-client>

ALT Latest Launch mission patch Mission 109, Starlink-15 (v1.0) Launched 2020-10-24T15:31:00.000Z aboard Falcon 9

ALT source code for a mocha-style unit test file showing a hybrids element using a reactive controller. the define call is: define(name, { clock: controller(ClockController, 1000), render: host => html`<output>${host.clock.value.getSeconds()}</output>`, } as Hybrids<{ clock: ClockController }>);

ALT git diff: 16 additions and 113 deletions

ALT import { ApolloQueryController } from '@apollo-elements/core'; import { ScrollInController } from '../utils'; class PaginatedQueryHost extends LitElement { private query = new ApolloQueryController(this, PaginatedQuery, { onData: () => this.scroller.reobserve(), variables: { offset: 0 }, }) private scroller = new ScrollInController(this, { selector: 'li:nth-last-child(5)', onIntersect: target => this.query.fetchMore({ variables: { offset: parseInt(target.dataset.id), } }), }) render() { const items = this.query.data?.items ?? []; return html` <ol>${items.map(x => html` <li data-id="${x.id}"> <a href="${x.url}">${x.name}</a> </li> `)}</ol> `; } }