DEV Community

Cover image for Take GraphQL into Orbit with Apollo Elements 3
Benny Powers 🇮🇱🇨🇦
Benny Powers 🇮🇱🇨🇦

Posted on • Updated on • Originally published at

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;

class HelloQuery extends ApolloElement<Data, Variables> {
  query = gql`
    query HelloQuery($name: String) {

  render() {
    return html`
        ${ ?? 'Hello'},
        ${ ?? 'Friend'}
Enter fullscreen mode Exit fullscreen mode


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)