Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @apollo-elements/hybrids

@apollo-elements/hybrids

Published on npm Published on webcomponents.org ISC License Release

👾 hybrids element descriptors 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 take existing hybrids component descriptors and connect them to your Apollo cache.

📓 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 client, mutation, query, and subscription factories that you can apply to your hybrids definitions; as well as ApolloQuery, ApolloMutation, and ApolloSubscription objects which you can spread in to your hybrid property descriptors.

❓ Queries

Use the client and query factories to connect your element to the apollo cache:

query HelloQuery($name: String) {
  hello(name: $name)
}
Imports
import { client, query, define, html } from '@apollo-elements/hybrids';
import HelloQuery from './Hello.query.graphql';
const render = ({ data }) => html`
  <p>${data?.hello ?? 'Hello'}</p>
`;

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

Alternatively, you can spread in the ApolloQuery hybrid property descriptors to define a generic querying element.

import { ApolloQuery, define, html } from '@apollo-elements/hybrids';

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

define('any-hello-element', { ...ApolloQuery, render });

Use them by assigning your graphql nodes to the query property.

import HelloQuery from './Hello.query.graphql';
const render = ({ data }) => html`
  <any-hello-element
      query="${HelloQuery}"
      variables="${{ name: 'Mr. Magoo' }}"
  ></any-hello-element>
`;

👾 Mutations

Like queries, you can use the client and mutation factories, or you can spread the generalized Hybrid.

mutation Name($name: String!) {
  name(name: $name) {
    name
  }
}
Imports
import { mutation, define, html } from '@apollo-elements/hybrids';
import NameMutation from './Name.mutation.graphql';
const onKeyup = ({ mutate }, { key, target: { value: name } }) => {
  if (key === 'Enter')
    mutate({ variables: { name } });
}

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

define('name-input', {
  client: client(),
  mutation: mutation(NameMutation),
  render,
});

🗞 Subscriptions

Just like query and mutation, use the client and subscription factories, or spread in the ApolloSubscription Hybrid prototype to define your subscription element.

subscription {
  news
}
Imports
import { mutation, define, html } from '@apollo-elements/hybrids';
import NameMutation from './Name.mutation.graphql';
const render = ({ data, error }) => error ? html`Error! ${error}` : html`
  Latest News: ${data.news}
`;

define('subscribing-element', {
  client: client(),
  subscription: 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'

const MessagesQuery = gql`
  query {
    messages
  }
`;

const subscription = gql`
  subscription {
    messagePosted
  }
`;

const updateQuery = (previous = [], { subscriptionData }) =>
    !subscriptionData.data ? previous
  : [subscriptionData.data.messagePosted, ...previous];

const message = message => html`<li>${message}</li>`;
const render = ({messages}) =>
  html`<ul>${messages.map(message)}</ul>`;


define('messages-list', {
  client: client(apolloClient),
  query: query(MessagesQuery),
  render,

  // add a 'private' property that calls `subscribeToMore` on connect
  __messagePosted_subscription: property(null, function connect(host) {
    host.subscribeToMore({ document: subscription, updateQuery });
  }),
});

👷‍♂️ Maintainers

apollo-elements is a community project maintained by Benny Powers.

Contact me on Codementor

Index

Variables

Const __testing_escape_hatch__

__testing_escape_hatch__: unique symbol = Symbol('__testing_escape_hatch__')

Functions

client

hookElementIntoHybridsCache

  • hookElementIntoHybridsCache<T>(host: T): void
  • Type parameters

    Parameters

    • host: T

    Returns void

hookPropertyIntoHybridsCache

  • hookPropertyIntoHybridsCache<T>(opts: CacheHookOpts<T>): void
  • Type parameters

    Parameters

    • opts: CacheHookOpts<T>

    Returns void

initDocument

  • initDocument<T>(opts: Options<T>): () => void
  • Type parameters

    Parameters

    • opts: Options<T>

    Returns () => void

      • (): void
      • Returns void

mutation

  • Type parameters

    • D

    • V

    Parameters

    Returns Descriptor<ApolloMutationElement<D, V>>

query

  • Type parameters

    • D

    • V

    Parameters

    Returns Descriptor<ApolloQueryElement<D, V>>

subscription

Object literals

Const ApolloElement

ApolloElement: object

client

client: Descriptor<ApolloElementElement<unknown, unknown>> = client()

Const ApolloMutation

ApolloMutation: object

client

client: Descriptor<ApolloElementElement<unknown, unknown>> = client()

mutation

mutation: Descriptor<ApolloMutationElement<unknown, unknown>> = mutation()

Const ApolloQuery

ApolloQuery: object

client

client: Descriptor<ApolloElementElement<unknown, unknown>> = client()

query

query: Descriptor<ApolloQueryElement<unknown, unknown>> = query()

Const ApolloSubscription

ApolloSubscription: object

client

client: Descriptor<ApolloElementElement<unknown, unknown>> = client()

subscription

subscription: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = subscription()