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