Need help with apollo-elements?
Click the β€œchat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

apollo-elements
292 Stars 13 Forks ISC License 626 Commits 12 Opened issues

Description

πŸš€πŸŒ› Use the Launch Platform πŸ‘©β€πŸš€πŸ‘¨β€πŸš€

Services available

!
?

Need anything else?

Contributors list

# 67,443
GraphQL
mixins
Express
aurelia
552 commits
# 45,204
GraphQL
Firebas...
sw-prec...
html5
3 commits
# 30,971
HTML
TypeScr...
workbox
Visual ...
2 commits
# 373,540
mixins
CSS
HTML
lit-htm...
1 commit
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

πŸ—Ί Guides and Docs

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

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.

πŸ“¦ 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.

  •  provides all it's children (even across open shadow roots) with a client instance.
  •  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';

Read More

🍸 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';

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

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';

Read More

🏁 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';

Read More

πŸ‘» 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';

Read More

πŸ¦„ 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';

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

import { ApolloQuery } from '@apollo-elements/gluon/apollo-query';
import { ApolloMutation } from '@apollo-elements/gluon/apollo-mutation';
import { ApolloSubscription } from '@apollo-elements/gluon/apollo-subscription';

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

import '@apollo-elements/polymer/apollo-query';
import '@apollo-elements/polymer/apollo-mutation';
import '@apollo-elements/polymer/apollo-subscription';

Read More

β€πŸ™οΈ 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.