lit-apollo-sample.js

// CodeSandboxで動かすときにエラーが出たので
// babel-polyfillをimportしてる
import "babel-polyfill";
import gql from "graphql-tag";
import { ApolloClient } from "apollo-client";
import { ApolloQuery, html } from "lit-apollo";
import { InMemoryCache } from "apollo-cache-inmemory";
import { from } from "apollo-link";
import { HttpLink } from "apollo-link-http";

// Linkを定義
const http = new HttpLink({
  uri: "https://www.graphqlhub.com/graphql"
});
const link = from([http]);

// ApolloClientを呼び出しつつCacheを初期化
const client = new ApolloClient({
  link,
  cache: new InMemoryCache()
});

// クエリを定義
const query = gql`
  query {
    hn2 {
      nodeFromHnId(id: "clayallsopp", isUserId: true) {
        id
      }
    }
  }
`;

// ApolloQueryクラスを継承して使う
class ConnectedElement extends ApolloQuery {
  constructor() {
    super();
    this.client = client;
    this.query = query;
  }

  render() {
    const { data } = this;
    const { hn2 = {} } = data || {};
    return html`
      <p>${hn2.nodeFromHnId.id}</p>
      <p>ffff</p>
    `;
  }
}

customElements.define("connected-element", ConnectedElement);