DEV Community

Cover image for Take GraphQL into Orbit with Apollo Elements 3
Benny Powers ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡จ๐Ÿ‡ฆ
Benny Powers ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡จ๐Ÿ‡ฆ

Posted on • Updated on • Originally published at apolloelements.dev

Take GraphQL into Orbit with Apollo Elements 3

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>
    `;
  }
}
Enter fullscreen mode Exit fullscreen mode

Examples

Check out these example apps:

App Generator

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

npm init @apollo-elements
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)