Web Component Libraries: Haunted
Haunted is an implementation of the React hooks API for web components.
Installing
npm i -S @apollo-elements/haunted
yarn add @apollo-elements/haunted
pnpm add @apollo-elements/haunted
Import useQuery
, useMutation
, or useSubscription
to define your operation.
import { useQuery, component, html } from '@apollo-elements/haunted';
import { HelloQuery } from './Hello.query.graphql';
function HelloQueryElement() {
const { data } = useQuery(HelloQuery, {
variables: {
name: 'Partner',
greeting: 'Howdy',
}
});
const greeting = data?.hello?.greeting ?? 'hello';
const name = data?.hello?.name ?? 'world';
return html`
<span id="hello">
${greeting}, ${name}!
</span>
`;
}
customElements.define('hello-query', component(HelloQueryElement));
Exports
@apollo-elements/haunted
import { useQuery, useMutation, useSubscription } from '@apollo-elements/haunted';