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

Web Component Libraries: lit-apollo

Looking for reactive Apollo controllers? See @apollo-elements/core

lit combines a reactive component base class with an efficient and expressive templating system. 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, html } from '@apollo-elements/lit-apollo';
import { customElement } from 'lit/decorators.js';
import { HelloQuery } from './Hello.query.graphql.js';
import '@power-elements/card';
import './client.js';

@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>
    `;
  }
}

@apollo-elements/lit-apollo