API
Apollo Elements consists of multiple web-component packages, a core of shared interfaces, ready-made components, and some library helpers.
Libraries
Whatever your preference for how to build web components, there's a flavour of Apollo Elements for you and your team. You can even mix-and-match in the same project, thanks to the common interface of HTML and the DOM.
- Class Mixins: Vanilla JS class mixins
- LitElement: Perhaps the most popular web-component base class
- FAST: Microsoft's new entry into the field
- Haunted: The React hooks API, but web components
- Hybrids: A unique chimera of object-oriented and functional styles
- Gluon: A breath more than vanilla, for the minimalists in the crowd
- Polymer: The original web-components library
Interfaces
Each of the web component library packages provides lets you build GraphQL apps differently, depending on the paradigm represented by the base package, they all share the same common interfaces
That is to say, whether you create a query element with lit-apollo
, haunted
, or vanilla JS mixins, once they connect to the DOM, they all behave the same vis-a-vis GraphQL.
Class inheritance diagram of Apollo Elements, showing
ApolloQuery
,ApolloMutation
, andApolloSubscription
inheriting fromApolloElement
ApolloElement
inheriting fromCustomElement
CustomElement
inheriting fromHTMLElement
Components
<apollo-client>
: Scope a subtree of ApolloElements to a specific client instance<apollo-mutation>
: Declaratively add mutations to your app