Haunted: useQuery

Apollo useQuery hook for web components.

Read the query component guides for examples and tips.

import { useQuery, component, html } from '@apollo-elements/haunted';
import { LaunchesQuery } from './Launches.query.graphql.js';

function Launches({ document = null, variables = null }) {
  const { data } = useQuery(LaunchesQuery, { variables: { limit: 3 } });

  const launches = data?.launchesPast ?? [];

  return html`
    <link rel="stylesheet" href="launches.css"/>
    <ol>
      ${launches.map(x => html`
        <li>
          <article>
            <span>${x.mission_name}</span>
            <img .src="${x.links.mission_patch_small}" alt="Badge" role="presentation"/>
          </article>
        </li>
      `)}
    </ol>
  `;
}

customElements.define('spacex-launches', component(Launches));

useQuery

Parameters

query

ComponentDocument<D>

options

ApolloQueryControllerOptions<D, V>

All properties are optional

Property	Type	Description
fetchPolicy	`WatchQueryFetchPolicy`	The fetchPolicy for the query.
variables	`Variables<D, V>`	Variables for the query.
noAutoSubscribe	`boolean`	If true, the element will not begin querying data until you manually call `subscribe`
shouldSubscribe	`(op?: Partial<Operation<D, V>) => boolean`	If true, the element will not begin querying data until you manually call `subscribe`
onData	`(data: Data<D>) => void`	Optional callback for when a query resolves.
onError	`(error: Error) => void`	Optional callback for when an error occurs.

Returns

ApolloQueryController<D, V>

Exports

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