Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

Web Component Libraries: Haunted

Haunted is an implementation of the React hooks API for web components.


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}!

customElements.define('hello-query', component(HelloQueryElement));



import { useQuery, useMutation, useSubscription } from '@apollo-elements/haunted';