Options
All
  • Public
  • Public/Protected
  • All
Menu

Apollo Elements

Apollo Elements

🚀 Apollo Elements 👩‍🚀

🌑 Custom elements meet Apollo GraphQL 🌜

👩‍🚀 It's one small step for a dev, one giant leap for the web platform! 👨‍🚀

Made with open-wc Contributions Welcome ISC License Maintainability Test Coverage Release

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

📦 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

🍸 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

Read More

🔥 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

Read More

🏁 FAST

These base classes extend from FASTElement, with all it's ergonomics and reactivity.

npm i -S @apollo-elements/fast

Read More

👩‍🔬 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

Read More

🦄 Hybrids

A set of objects you can roll into your hybrids to make it easier to connect to your Apollo cache.

npm i -S @apollo-elements/hybrids

Read More

🧬 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

Read More

🗺 Guides and Docs

If you just want to see the API Docs, check them out for all our packages at apolloelements.dev

‍🙏️ 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.

Contact me on Codementor