Apollo Elements
Build high-performance web apps with GraphQL and web components.
<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>
<script src="type-policies.js" type="module"></script>
import '@apollo-elements/components';
const client = document.querySelector('apollo-client');
(async function() {
await customElements.whenDefined('apollo-client');
await client.updateComplete;
client.typePolicies = {
Launch: {
fields: {
launch_date_utc(next) {
try {
return new Date(next).toDateString();
} catch(e) {
return next;
}
}
}
}
};
})();
html,
body {
background: black;
font-family: 'Open sans';
color: white;
}
article {
display: grid;
grid-template-areas: 'h i' 'p p';
grid-template-columns: auto min-content;
gap: 12px;
padding: 0 12px;
}
:host([loading]) article { display: none; }
article { opacity: 0; }
h2 { grid-area: h; }
p { grid-area: p; }
img, p { display: block; }
.resolved {
opacity: 1;
transition: opacity 0.2s ease-in;
}
img {
max-width: 50px;
grid-area: i;
place-self: center;
}
query LatestLaunch {
launchLatest {
id
launch_date_utc
links { mission_patch }
mission_name
rocket { rocket_name }
}
}
Why Apollo Elements?
GraphQL
Write declarative, expressive frontends and manage client-side state using GraphQL.Interoperable
Use your GraphQL components in any other frontend framework, or none!Write GraphQL web applications with declarative HTML templates. Define custom query, mutation, or subscription components in JavaScript or TypeScript using your favourite web component library. Mix and match programming styles and libraries in a single app, or publish GraphQL-connected components for use in any front-end framework.
Use your Favourite Web Components Library
Apollo Elements comes with support for popular web components libraries. Components built using different libraries can coexist seamlessly in the same app.
Interoperable
Write GraphQL components once and use them everywhere with ease. Elements created with Apollo Elements work in any framework or none, even in Angular, Preact, React, Svelte, or Vue apps.
These demos all import the same Apollo Element component from NPM.
Click a tab to view the demo