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.


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';

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}!