❀npm packaged modules

    TypeScript icon, indicating that this package has built-in type declarations

    5.0.3Β β€’Β PublicΒ β€’Β Published


    Published on npm Published on webcomponents.org ISC License Release

    πŸš€ Lit base classes that connect to your Apollo cache 🌜

    πŸ‘©β€πŸš€ It's one small step for a dev, one giant leap for the web platform! πŸ‘¨β€πŸš€

    This package is for single-operation GraphQL components. Looking for Apollo Reactive Controllers? See @apollo-elements/core

    View Live Demo

    πŸ”Ž Read the Full API Docs πŸ”Ž

    πŸ““ Contents

    πŸ”§ Installation

    Apollo Elements' lit-apollo is distributed through npm, the node package manager. To install a copy of the latest version in your project's node_modules directory, install npm on your system then run the following command in your project's root directory:

    npm install --save @apollo-elements/lit-apollo

    πŸ‘©β€πŸš€ Usage

    See our docs on setting up Apollo client so your components can fetch their data.

    First, let's define our component's GraphQL query.

    query HelloQuery {
      helloWorld {

    Read our docs on working with GraphQL files during development and in production for more info, and be sure to read about generating TypeScript types from GraphQL to enhance your developer experience and reduce bugs.

    Next, we'll define our UI component. Import the base class and helpers, query, and types:

    import { ApolloQuery, html, customElement } from '@apollo-elements/lit-apollo';
    import HelloQuery from './Hello.query.graphql';
    import type {
      HelloQueryData as Data,
      HelloQueryVariables as Variables
    } from '../codegen/schema';

    Then define your component's template. Make sure to set the query field, so your component starts fetching data automatically.

    export class HelloQueryElement extends ApolloQuery<Data, Variables> {
      query = HelloQuery;
      render() {
        return html`
          <what-spin-such-loader ?active="${this.loading}"></what-spin-such-loader>
          this.error ? html`
            <h1>😒 Such Sad, Very Error! 😰</h1>
        : html`
              ${this.data?.helloWorld.greeting ?? 'Hello'},
              ${this.data?.helloWorld.name ?? 'Friend'}!

    πŸ“š Other Libraries

    Looking for other libraries? Want to use Apollo with vanilla extends HTMLElement components? Check out our docs site

    πŸ‘·β€β™‚οΈ Maintainers

    apollo-elements is a community project maintained by Benny Powers.

    Contact me on Codementor


    npm i @apollo-elements/lit-apollo

    DownloadsWeekly Downloads






    Unpacked Size

    246 kB

    Total Files


    Last publish


    • bennyp