Web Component Libraries: Polymer

Polymer is the OG web components library, and while it's now in maintenance (the library, not the project), it's still in use all over the web.

Installation

npm i -S @apollo-elements/polymer

yarn add @apollo-elements/polymer

pnpm add @apollo-elements/polymer

Import apollo-query, apollo-mutation, or apollo-subscription to bind data up into your Polymer elements.

Examples

These custom elements fire polymer-style *-changed events when the Apollo cache updates their state. They extend directly from HTMLElement so they're small in size, and their notifying properties make them perfect for use in Polymer templates.

Using <apollo-client> to Scope a Client to it's Children

This example uses <apollo-client> to create a client and assign it to <apollo-query>. There's no need to explicitly assign the client property, since <apollo-client> automatically sets the client on all it's deeply nested children.

import { PolymerElement, html } from '@polymer/polymer';
import '@apollo-elements/components/apollo-client';
import '@apollo-elements/polymer/apollo-query';

class HelloQueryElement extends PolymerElement {
  static get template() {
    return html`
      <apollo-client uri="/graphql">
        <apollo-query data="{{data}}" variables="[[variables]]">
          <script type="application/graphql">
            query HelloQuery($name: String, $greeting: String) {
              hello(name: $name, greeting: $greeting) {
                name
                greeting
              }
            }
          </script>
        </apollo-query>
      </apollo-client>

      <span id="hello">
        [[getGreeting(data)]], [[getName(data)]]!
      </span>
    `;
  }

  static get properties() {
    return {
      data: { type: Object },
      variables: {
        type: Object,
        value: () => ({
          name: 'Partner',
          greeting: 'Howdy',
        }),
      },
    };
  }

  getGreeting(data) {
    return data && data.hello && data.hello.greeting || 'hello';
  }

  getName(data) {
    return data && data.hello && data.hello.name || 'world';
  }
}

customElements.define('hello-query', HelloQueryElement);

Using Two-Way Binding to Set the Client

If you prefer, you can use Polymer's two-way binding to set an element's client property, instead of nesting the apollo elements under an <apollo-client> element.

<apollo-client uri="/graphql" client="{{ownClient}}"></apollo-client>
<apollo-client uri="https://api.spacex.land/graphql" client="{{spaceXClient}}"></apollo-client>

<apollo-query
    client="[[ownClient]]"
    data="{{helloData}}"
    variables="[[helloVariables]]">
  <script type="application/graphql">
    query HelloQuery($name: String, $greeting: String) {
      hello(name: $name, greeting: $greeting) {
        name
        greeting
      }
    }
  </script>
</apollo-query>

<apollo-query
    client="[[spacexClient]]"
    data="{{launchesData}}"
    variables="[[launchesVariables]]">
  <script type="application/graphql">
    query LaunchesQuery($sort: String = "launch_date_utc"){
      launches(sort: $sort, order: "desc") {
        launch_date_utc
        mission_name
        rocket {
          rocket_name
        }
      }
    }
  </script>
</apollo-query>

<p>
  <span>[[getGreeting(helloData)]]</span>,
  <span>[[getGreeting(helloData)]]</span>!
  Latest launch is
  <span>[[launchesData.launches.0.mission_name]]</span>.
</p>

Exports

import '@apollo-elements/polymer';
import {
  PolymerApolloElement,
  PolymerApolloQuery,
  PolymerApolloMutation,
  PolymerApolloSubscription
} from '@apollo-elements/polymer';