Web Component Libraries: Hybrids

Hybrids is a unique web components framework which combines aspects of functional and object-oriented paradigms into something entirely it's own.

Installation

npm i -S @apollo-elements/hybrids

yarn add @apollo-elements/hybrids

pnpm add @apollo-elements/hybrids

Import client, query, mutation, and subscription descriptor factories and corresponding object spreads you can roll into your hybrids to make it easier to connect to your Apollo cache.

import type { ApolloQueryElement } from '@apollo-elements/interfaces';
import { client, query, define, html } from '@apollo-elements/hybrids';

import HelloQuery from './Hello.query.graphql';

define<ApolloQueryElement<typeof HelloQuery>>('hello-query', {
  client: client(),
  query: query(HelloQuery),
  render: ({ data }) => html`
    <span id="hello">
      ${data?.hello?.greeting ?? 'hello'},
      ${data?.hello?.name ?? 'world'}!
    </span>
  `,
});

`@apollo-elements/hybrids`

import {
  ApolloQuery,
  ApolloMutation,
  ApolloSubscription,
  client,
  query,
  mutation,
  subscription
} from '@apollo-elements/hybrids';