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

This package provides ApolloQuery, ApolloMutation, and ApolloSubscription objects which you can spread in to your hybrid property descriptors.

❓ Queries

Spread in the ApolloQuery hybrid property descriptors to define a querying element.

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

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

define('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`
  <hello-element query="${HelloQuery}" variables="${{ name: 'Mr. Magoo' }}></hello-element>
`;

NOTE: If you set window.__APOLLO_CLIENT__, you don't need to specify the client property when instantiating your elements, the way we do above.

👾 Mutations

Spread in the ApolloMutation hybrid property descriptors to define a mutating element.

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

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', { ...ApolloMutation, render });

Which you add to your templates thus:

import { gql } from '@apollo/client/core';

const mutation = gql`
  mutation Name($name: String!) {
    name(name: $name) {
      name
    }
  }
`;

const template = html`
  <name-input
      client="${client}"
      mutation="${mutation}"
  ></name-input>
`;

🗞 Subscriptions

Spread in the ApolloSubscription Hybrid prototype to define your subscription element.

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

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

define('subscribing-element', { ...ApolloSubscription, render });

And instantiate it like so:

import { gql } from '@apollo/client/core';

const subscription = gql`subscription { news }`;

const template = html`
  <subscribing-element
      client="${client}"
      subscription="${subscription}"
  ></subscribing-element>
`;

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 { gql } from '@apollo/client/core';

const query = 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>`;

const messageList = document.createElement('message-list');
messagesList.query = query;
messagesList.subscribeToMore({ document: subscription, updateQuery });
document.body.append(messageList);

define('messages-list', { ...ApolloQuery, render }

👷‍♂️ Maintainers

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

Contact me on Codementor

Index

Functions

classAccessors

  • classAccessors<TInstance>(klass: Constructor<TInstance>, key: keyof TInstance): Descriptor<TInstance>
  • Given a class and a property key, will return a Hybrids descriptor for the property's accessor or accessor pair.

    example
    class CustomElement extends HTMLElement {
      get property() { ... }
      set property(v) { ... }
    }
    
    define('uses-property', {
      layout: classAccessor(CustomElement, 'property'),
    });

    Type parameters

    Parameters

    Returns Descriptor<TInstance>

classMethod

  • classMethod<TInstance, Key>(prototype: Constructor<TInstance> & { is?: string }, key: Key): Descriptor<TInstance>
  • Given a class and a method name, will produce a Hybrids descriptor of a bound instance of the method.

    example
    class CustomElement extends HTMLElement { layout() { ... } }
    
    define('uses-layout', {
      layout: classMethod(CustomElement, 'layout'),
    });

    Type parameters

    Parameters

    • prototype: Constructor<TInstance> & { is?: string }
    • key: Key

    Returns Descriptor<TInstance>

Object literals

Const ApolloElement

ApolloElement: object

Private __document

__document: null = null

Private __variables

__variables: null = null

client

client: Descriptor<ApolloElementElement> = property(null, connect)

data

data: null = null

document

document: Descriptor<ApolloElementElement> = classAccessors(ApolloElementElement, 'document')

error

error: null = null

errors

errors: null = null

Const ApolloMutation

ApolloMutation: object

called

called: false = false

errorPolicy

errorPolicy: Descriptor<ApolloMutationElement<unknown, unknown>> = property(undefined)

generateMutationId

generateMutationId: Descriptor<ApolloMutationElement<unknown, unknown>> = classMethod(ApolloMutationElement, 'generateMutationId')

ignoreResults

ignoreResults: false = false

isMostRecentMutation

isMostRecentMutation: Descriptor<ApolloMutationElement<unknown, unknown>> = classMethod(ApolloMutationElement, 'isMostRecentMutation')

mostRecentMutationId

mostRecentMutationId: number = 0

mutate

mutate: Descriptor<ApolloMutationElement<unknown, unknown>> = classMethod(ApolloMutationElement, 'mutate')

mutation

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

onCompletedMutation

onCompletedMutation: Descriptor<ApolloMutationElement<unknown, unknown>> = classMethod(ApolloMutationElement, 'onCompletedMutation')

onMutationError

onMutationError: Descriptor<ApolloMutationElement<unknown, unknown>> = classMethod(ApolloMutationElement, 'onMutationError')

variables

variables: null = null

Const ApolloQuery

ApolloQuery: object

canSubscribe

canSubscribe: Descriptor<ApolloQueryElement<unknown, unknown>> = classMethod(ApolloQueryElement, 'canSubscribe')

errorPolicy

errorPolicy: string = "none"

executeQuery

executeQuery: Descriptor<ApolloQueryElement<unknown, unknown>> = classMethod(ApolloQueryElement, 'executeQuery')

fetchMore

fetchMore: Descriptor<ApolloQueryElement<unknown, unknown>> = classMethod(ApolloQueryElement, 'fetchMore')

nextData

nextData: Descriptor<ApolloQueryElement<unknown, unknown>> = classMethod(ApolloQueryElement, 'nextData')

nextError

nextError: Descriptor<ApolloQueryElement<unknown, unknown>> = classMethod(ApolloQueryElement, 'nextError')

noAutoSubscribe

noAutoSubscribe: false = false

options

options: Descriptor<ApolloQueryElement<unknown, unknown>> = classAccessors(ApolloQueryElement, 'options')

query

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

refetch

refetch: Descriptor<ApolloQueryElement<unknown, unknown>> = classMethod(ApolloQueryElement, 'refetch')

shouldSubscribe

shouldSubscribe: Descriptor<ApolloQueryElement<unknown, unknown>> = classMethod(ApolloQueryElement, 'shouldSubscribe')

subscribe

subscribe: Descriptor<ApolloQueryElement<unknown, unknown>> = classMethod(ApolloQueryElement, 'subscribe')

subscribeToMore

subscribeToMore: Descriptor<ApolloQueryElement<unknown, unknown>> = classMethod(ApolloQueryElement, 'subscribeToMore')

variables

variables: Descriptor<ApolloQueryElement<unknown, unknown>> = classAccessors(ApolloQueryElement, 'variables')

watchQuery

watchQuery: Descriptor<ApolloQueryElement<unknown, unknown>> = classMethod(ApolloQueryElement, 'watchQuery')

Const ApolloSubscription

ApolloSubscription: object

canSubscribe

canSubscribe: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = classMethod(ApolloSubscriptionElement, 'canSubscribe')

cancel

cancel: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = classMethod(ApolloSubscriptionElement, 'cancel')

endSubscription

endSubscription: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = classMethod(ApolloSubscriptionElement, 'endSubscription')

fetchPolicy

fetchPolicy: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = property(undefined)

initObservable

initObservable: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = classMethod(ApolloSubscriptionElement, 'initObservable')

nextData

nextData: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = classMethod(ApolloSubscriptionElement, 'nextData')

nextError

nextError: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = classMethod(ApolloSubscriptionElement, 'nextError')

noAutoSubscribe

noAutoSubscribe: false = false

notifyOnNetworkStatusChange

notifyOnNetworkStatusChange: false = false

onComplete

onComplete: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = classMethod(ApolloSubscriptionElement, 'onComplete')

pollInterval

pollInterval: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = property(undefined)

shouldSubscribe

shouldSubscribe: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = classMethod(ApolloSubscriptionElement, 'shouldSubscribe')

skip

skip: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = property(undefined)

subscribe

subscribe: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = classMethod(ApolloSubscriptionElement, 'subscribe')

subscription

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

variables

variables: Descriptor<ApolloSubscriptionElement<unknown, unknown>> = classAccessors(ApolloSubscriptionElement, 'variables')