Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

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';