Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.