Web Component Libraries: LitElement

lit-element is a reactive component base class from the Polymer team at Google. It's a popular and simple choice for building any kind of web component project.

Installation

npm i -S @apollo-elements/lit-apollo

yarn add @apollo-elements/lit-apollo

pnpm add @apollo-elements/lit-apollo

lit-apollo base classes extend from LitElement, so you can quickly get up and running creating declarative front-ends with Apollo GraphQL.

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

import { HelloQuery } from './Hello.query.graphql';

@customElement('hello-query')
class HelloQueryElement extends ApolloQuery<typeof HelloQuery> {
  query = HelloQuery;

  variables = {
    greeting: 'Howdy',
    name: 'Partner'
  }

  render() {
    const greeting = this.data?.hello?.greeting ?? 'hello';
    const name = this.data?.hello?.name ?? 'world';
    return html`
      <span id="hello">
        ${greeting}, ${name}!
      </span>
    `;
  }
}

Exports

`@apollo-elements/lit-apollo`

import {
  ApolloElement,
  ApolloQuery,
  ApolloMutation,
  ApolloSubscription
} from '@apollo-elements/lit-apollo';