Apollo Elements
Build high-performance web apps with GraphQL and web components.
<apollo-client uri="https://main--spacex-l4uc6p.apollographos.net/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>
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.