🚀 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 uses lit-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

• 🥑 Core
• 🧱 Components
• 🍸 Mixins
• 🔥 Lit
• 🏁 FAST
• 👻 Haunted
• ⚛️ Atomico
• 🦄 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 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/core@next

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/components@next

<apollo-client src="/graphql">
  <apollo-query>
    <script type="application/graphql" src="AllUsers.query.graphql"></script>
    <template>
      <link rel="stylesheet" href="all-users.css">
      <ul>
        <template type="repeat" items="{{ data.users ?? [] }}">
          <li data-user-id="{{ item.id }}">
            <h2>{{ item.name }}</h2>
            <img src="{{ item.avatar }}" alt=""/>
          </li>
        </template>
      </ul>
    </template>
  </apollo-query>
  <apollo-mutation refetch-queries="AllUsers">
    <script type="application/graphql" src="AddUser.mutation.graphql"></script>
    <template>
      <link rel="stylesheet" href="add-user.css">
      <label for="name">User Name</label>
      <input id="name" ?disabled="{{ loading }}" data-variable="name"/>
      <label for="avatar">Avatar Image</label>
      <input id="avatar" type="file" ?disabled="{{ loading }}" data-variable="avatar"/>
      <small ?hidden="{{ !data }}">{{ data.addUser.name }} added!</small>
    </template>
  </apollo-mutation>
</apollo-client>

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@next

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@next

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@next

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@next

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/atomico@next

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/hybrids@next

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/gluon@next

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@next

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.