Awesome Open Source
Awesome Open Source
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 and keep your bundle size small, or mix and match different libraries and approaches in the same app.

Core

Reactive GraphQL controllers contain sharable, reusable, and stackable logic.

npm i -S @apollo-elements/[email protected]
import { ApolloQueryController } from '@apollo-elements/core/apollo-query-controller';
import { ApolloMutationController } from '@apollo-elements/core/apollo-mutation-controller';
import { ApolloSubscriptionController } from '@apollo-elements/core/apollo-subscription-controller';

Components

Write GraphQL apps in HTML.

  • <apollo-client> provides all it's children (even across open shadow roots) with a client instance.
  • <apollo-query> write GraphQL queries and their templates in HTML.
  • <apollo-mutation> declarative mutation components in HTML.
  • <apollo-subscription> write realtime GraphQL subscriptions and their templates in HTML.
npm i -S @apollo-elements/[email protected]
import '@apollo-elements/components/apollo-client';
import '@apollo-elements/components/apollo-query';
import '@apollo-elements/components/apollo-mutation';
import '@apollo-elements/components/apollo-subscription';

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/[email protected]
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/[email protected]
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/[email protected]
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/[email protected]
import { useQuery } from '@apollo-elements/haunted/useQuery';
import { useMutation } from '@apollo-elements/haunted/useMutation';
import { useSubscription } from '@apollo-elements/haunted/useSubscription';

Read More

Atomico

Alternate hooks implementation for web components, with atomico!

npm i -S @apollo-elements/[email protected]
import { useQuery } from '@apollo-elements/atomico/useQuery';
import { useMutation } from '@apollo-elements/atomico/useMutation';
import { useSubscription } from '@apollo-elements/atomico/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/[email protected]
import { query, mutation, subscription } from '@apollo-elements/hybrids';

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/[email protected]
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/[email protected]
import '@apollo-elements/polymer/polymer-apollo-query';
import '@apollo-elements/polymer/polymer-apollo-mutation';
import '@apollo-elements/polymer/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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (254,029) 
Hacktoberfest (36,020) 
Graphql (8,288) 
Webcomponents (2,118) 
Polymer (769) 
Mixins (397) 
Lit Element (239) 
Lit Html (212) 
Gluon (136) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194