Apollo Elements 3 launches into orbit today with tonnes of new features. There's a brand new docs site complete with guides, full TypeScript support, app/component generators, and more.
Use Apollo Elements to write GraphQL-based apps using web components as the view layer. Apollo Elements supports lit-element, hybrids, and gluon out of the box, or you can use the custom-element mixins to add support to any custom-element base class.
Apollo Elements 3 supports the new Apollo Client 3 with all it's enhancements to developer experience.
import { ApolloQuery } from '@apollo-elements/lit-apollo';
import { customElement, html } from 'lit-element';
import { gql } from '@apollo/client/core';
interface Data {
name: string;
greeting: string;
}
interface Variables {
name?: string;
}
@customElement('hello-query')
class HelloQuery extends ApolloElement<Data, Variables> {
query = gql`
query HelloQuery($name: String) {
name
greeting
}
`;
render() {
return html`
<p>
${this.data?.greeting ?? 'Hello'},
${this.data?.name ?? 'Friend'}
</p>
`;
}
}
Examples
Check out these example apps:
- leeway is a simple chat app that uses GraphQL subscriptions for real-time updates
- launchctl shows you information about SpaceX launches using the unofficial spacex.land API
App Generator
Want to get started writing your GraphQL app in a snap? Try our new app generator
npm init @apollo-elements
So strap into your crash couch and feel that juice coming on, it's time for a hard burn past the GraphQL gate with Apollo Elements
Top comments (0)