Apollo Elements 3 launches into orbit today with tonnes of new features. There's a brand new docs site complete with guides, full TypeScript support, app/component generators, and more.

Use Apollo Elements to write GraphQL-based apps using web components as the view layer. Apollo Elements supports lit-element, hybrids, and gluon out of the box, or you can use the custom-element mixins to add support to any custom-element base class.

Apollo Elements 3 supports the new Apollo Client 3 with all it's enhancements to developer experience.

import { ApolloQuery } from '@apollo-elements/lit-apollo';
import { customElement, html } from 'lit-element';
import { gql } from '@apollo/client/core';

interface Data {
  name: string;
  greeting: string;
}

interface Variables {
  name?: string;
}

@customElement('hello-query')
class HelloQuery extends ApolloElement<Data, Variables> {
  query = gql`
    query HelloQuery($name: String) {
      name
      greeting
    }
  `;

  render() {
    return html`
      <p>
        ${this.data?.greeting ?? 'Hello'},
        ${this.data?.name ?? 'Friend'}
      </p>
    `;
  }
}

Examples

Check out these example apps:

• leeway is a simple chat app that uses GraphQL subscriptions for real-time updates
• launchctl shows you information about SpaceX launches using the unofficial spacex.land API

App Generator

Want to get started writing your GraphQL app in a snap? Try our new app generator

npm init @apollo-elements

So strap into your crash couch and feel that juice coming on, it's time for a hard burn past the GraphQL gate with Apollo Elements