apollo-elements / Apollo Elements
Programming Languages
Projects that are alternatives of or similar to Apollo Elements
๐ Apollo Elements ๐ฉโ๐
๐ Custom elements meet Apollo GraphQL ๐
๐ฉโ๐ It's one small step for a dev, one giant leap for the web platform! ๐จโ๐
Apollo Elements offers packages based on a variety of underlying web component authoring libraries. You can pick the one that suits your project in order to keep your app sizes small.
npm init @apollo-elements
๐ค Demos
-
#leeway
is an example chat PWA that useslit-apollo
to make it easier for you to avoid doing actual work. Source Repository -
LaunchCTL
is a simple PWA that displays info about SpaceX launches. It uses the unofficial spacex.land GraphQL API. Source Repository
๐บ Guides and Docs
If you just want to see the API Docs, check them out for all our packages at apolloelements.dev
- ๐งฑ Components
- ๐ธ Mixins
- ๐ฅ lit-apollo
- ๐ FAST
- ๐ป Haunted
- ๐ฆ Hybrids
- ๐ฌ Gluon
- ๐งฌ Polymer
Use in any Framework
Elements created with Apollo Elements work in any framework. Write GraphQL components once and use them in page with ease, even Angular, Preact, React, Svelte, or Vue apps.
- Angular โค๏ธ Apollo Elements
- Preact ๐ Apollo Elements
- React ๐ Apollo Elements
- Svelte ๐งก Apollo Elements
- Vue ๐ Apollo Elements
๐ฆ Packages
Apollo Elements offers packages based on a variety of underlying web component authoring libraries. You can pick the one that suits your project in order to keep your app sizes small.
๐งฑ Components
Utility components that help you factor your graphql-based app.
-
<apollo-client>
provides all it's children (even across open shadow roots) with a client instance. -
<apollo-mutation>
lets you write declarative mutation components without subclassing.
npm i -S @apollo-elements/components
import '@apollo-elements/components/apollo-client';
import '@apollo-elements/components/apollo-mutation';
๐ธ Mixins
These custom element class mixins give you all the features you need to connect your components to your Apollo cache without imposing a specific component library.
npm i -S @apollo-elements/mixins
import { ApolloQueryMixin } from '@apollo-elements/mixins/apollo-query-mixin';
import { ApolloMutationMixin } from '@apollo-elements/mixins/apollo-mutation-mixin';
import { ApolloSubscriptionMixin } from '@apollo-elements/mixins/apollo-subscription-mixin';
๐ฅ lit-apollo
These base classes extend from LitElement
, so you can quickly get up and running creating declarative front-ends with Apollo GraphQL.
npm i -S @apollo-elements/lit-apollo
import { ApolloQuery } from '@apollo-elements/lit-apollo/apollo-query';
import { ApolloMutation } from '@apollo-elements/lit-apollo/apollo-mutation';
import { ApolloSubscription } from '@apollo-elements/lit-apollo/apollo-subscription';
๐ FAST
These base classes extend from FASTElement
, with all it's ergonomics and reactivity.
npm i -S @apollo-elements/fast
import { ApolloQuery } from '@apollo-elements/fast/apollo-query';
import { ApolloMutation } from '@apollo-elements/fast/apollo-mutation';
import { ApolloSubscription } from '@apollo-elements/fast/apollo-subscription';
๐ป Haunted
Apollo hooks for web components, with haunted!
npm i -S @apollo-elements/haunted
import { useQuery } from '@apollo-elements/haunted/useQuery';
import { useMutation } from '@apollo-elements/haunted/useMutation';
import { useSubscription } from '@apollo-elements/haunted/useSubscription';
๐ฆ Hybrids
Descriptor factories and object spreads you can roll into your hybrids to make it easier to connect to your Apollo cache.
npm i -S @apollo-elements/hybrids
import { client, query, mutation, subscription } from '@apollo-elements/hybrids';
import { ApolloQuery } from '@apollo-elements/hybrids/apollo-query';
import { ApolloMutation } from '@apollo-elements/hybrids/apollo-mutation';
import { ApolloSubscription } from '@apollo-elements/hybrids/apollo-subscription';
๐ฉโ๐ฌ Gluon
These base classes extend from GluonElement
, a simplified wc library that uses lit-html
for templating while keeping component state and lifecycle concerns 'close to the metal'.
npm i -S @apollo-elements/gluon
import { ApolloQuery } from '@apollo-elements/gluon/apollo-query';
import { ApolloMutation } from '@apollo-elements/gluon/apollo-mutation';
import { ApolloSubscription } from '@apollo-elements/gluon/apollo-subscription';
๐งฌ Polymer
These custom elements fire polymer-style *-changed
events when the Apollo cache updates their state. They extend directly from HTMLElement
so they're small in size, and their notifying properties make them perfect for use in Polymer templates.
npm i -S @apollo-elements/polymer
import '@apollo-elements/polymer/apollo-query';
import '@apollo-elements/polymer/apollo-mutation';
import '@apollo-elements/polymer/apollo-subscription';
โ๐๏ธ Acknowledgements
apollo-elements
is a community project maintained by Benny Powers. We proudly use Open Web Components and Modern Web tools. Thanks to Netlify and Heroku for hosting our documentation and demos.