• Public
  • Public/Protected
  • All

Module @apollo-elements/polymer


Published on npm Published on webcomponents.org ISC License Release

🚀 Custom Elements with Polymer-style two-way binding from your Apollo cache 🌜

👩‍🚀 For developing with space-age Polymers 👨‍🚀

📓 Contents

🔧 Installation

apollo-elements are distributed through npm the node package manager. To install a copy of the latest version of these elements in your project's node_modules directory, first Install npm on your system, then run the following command in your project's root directory:

npm install --save @apollo-elements/polymer

@apollo-elements/polymer does not depend on @polymer/polymer. The components extend directly from HTMLElement, so they're suitable for use in any project, not just Polymer library apps.

👩‍🚀 Usage

By default, these elements will use the client assigned to window.__APOLLO_CLIENT__, but you could alternatively assign to each element's client property directly.

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core';

window.__APOLLO_CLIENT__ = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'https://api.spacex.land/graphql',

After that, import the elements.

import '@apollo-elements/polymer/apollo-query';
import '@apollo-elements/polymer/apollo-mutation';

You can now use them in your polymer template:

<apollo-query data="{{data}}" variables="[[variables]]"</a>">
  <script type="application/graphql">
    query User($id: ID!)
      user(id: $id) {

  <iron-image slot="item-icon">[[data.user.picture]]</iron-image>

👷‍♂️ Maintainers

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

Contact me on Codementor




  • notify<Class>(target: Class, key: string): void
  • Decorator to fire a Polymer-Library-style *-changed event;

    Type parameters


    • target: Class
    • key: string

    Returns void