@apollo-elements/hybrids NPM

@apollo-elements/hybrids

👾 hybrids GraphQL factories that shoot for the moon 🚀

hybrids is a modern, functional, and opinionated UI library based on the web component standards. It sports a refreshing take on ui-as-value. Take a look at the repository and documentation, and this blog post introduction to hybrids

Apollo Elements hybrids make it easy to add GraphQL to your hybrids components.

🔎 Read the Full API Docs 🔎

📓 Contents

🔧 Installation

Apollo Elements hybrids are distributed through npm, the node package manager. To install a copy of the latest version in your project's node_modules directory, install npm on your system then run the following command in your project's root directory:

npm install --save @apollo-elements/hybrids

👩‍🚀 Usage

See our docs on setting up Apollo client so your components can fetch their data.

This package provides mutation, query, and subscription factories that you can apply to your hybrids definitions.

❓ Queries

Use the query factory to connect your element to the apollo cache:

query HelloQuery($name: String) {
  hello(name: $name)
}

import { query, define, html } from '@apollo-elements/hybrids';
import HelloQuery from './Hello.query.graphql';

const render = ({ hello }) => html`
  <p>${hello.data?.hello ?? 'Hello'}</p>
`;

define('hello-element', {
  hello: query(HelloQuery),
  render
});

👾 Mutations

Like queries, you can use the mutation factory.

mutation Name($name: String!) {
  name(name: $name) {
    name
  }
}

import { mutation, define, html } from '@apollo-elements/hybrids';
import UpdateNameMutation from './UpdateName.mutation.graphql';

const onKeyup = (host, event) => {
  if (event.key === 'Enter')
    host.updateName.mutate({ variables: { name: event.target.value } });
}

const render = () =>
  html`<input aria-label="Name" placeholder="Name" onkeyup="${onKeyup}"/>`;

define('name-input', {
  updateName: mutation(UpdateNameMutation),
  render,
});

🗞 Subscriptions

Just like query and mutation, use subscription factory.

subscription {
  news
}

import { subscription, define, html } from '@apollo-elements/hybrids';
import NewsSubscription from './News.subscription.graphql';

const render = ({ news }) => news.error ? html`
  Error! ${news.error.message}
` : html`
  Latest News: ${news.data?.news}
`;

define('subscribing-element', {
  news: subscription(NewsSubscription),
  render
});

If you'd like to set up a subscription with an initial value from a query, then update that query's cached value each time the subscription reports new data, pass a subscription document and an updateQuery function with signature (prev: CachedValue, { subscriptionData }): next: CachedValue to the subscribeToMore method on a query element:

import { subscription, define, html } from '@apollo-elements/hybrids';
import { gql } from '@apollo/client/core';

import { apolloClient } from '../client'

define('messages-list', {
  messages: query(gql`{ messages }`),
  render({ messages }) {
    const messages = messages.data?.messages ?? [];
    return html`<ul>${messages.map(message => html`<li>${message}</li>`)}</ul>`;
  },
  /** a 'private' property that calls `subscribeToMore` on connect */
  __messagePosted_subscription: {
    connect(host) {
      host.messages.subscribeToMore({
        document: gql`
          subscription {
            messagePosted
          }
        `,
        updateQuery(previous = [], { subscriptionData }) {
          return (
              !subscriptionData.data ? previous
            : [subscriptionData.data.messagePosted, ...previous]
          );
        }
      });
    }
  }
});