Web Component Libraries: LitElement
lit-element
is a reactive component base class from the Polymer team at Google. It's a popular and simple choice for building any kind of web component project.
Installation
npm i -S @apollo-elements/lit-apollo
yarn add @apollo-elements/lit-apollo
pnpm add @apollo-elements/lit-apollo
lit-apollo
base classes extend from LitElement
, so you can quickly get up and running creating declarative front-ends with Apollo GraphQL.
import { ApolloQuery, customElement, html } from '@apollo-elements/lit-apollo';
import { HelloQuery } from './Hello.query.graphql';
@customElement('hello-query')
class HelloQueryElement extends ApolloQuery<typeof HelloQuery> {
query = HelloQuery;
variables = {
greeting: 'Howdy',
name: 'Partner'
}
render() {
const greeting = this.data?.hello?.greeting ?? 'hello';
const name = this.data?.hello?.name ?? 'world';
return html`
<span id="hello">
${greeting}, ${name}!
</span>
`;
}
}
Exports
@apollo-elements/lit-apollo
import {
ApolloElement,
ApolloQuery,
ApolloMutation,
ApolloSubscription
} from '@apollo-elements/lit-apollo';