<link rel="stylesheet" href="/_merged_assets/_static/search/noscript.css">
Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

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>

Why Apollo Elements?

High-Performance

Leverage the modern web platform to deliver less JavaScript, without sacrificing DX.

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