Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

Atomico: useQuery

Apollo useQuery hook for web components.

Demo

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

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

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

  return html`
    <host shadowDom>
      <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>
    </host>
  `;
}

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

Read the query component guides for more examples and tips.

useQuery

Parameters

query

ComponentDocument<D>

options

ApolloQueryControllerOptions<D, V>
Option 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 Determines whether the element should attempt to subscribe automatically\nOverride to prevent subscribing unless your conditions are met
onData (data: Data<D>) => void Optional callback for when a query resolves.
onError (error: Error) => void Optional callback for when an error occurs.

Inherits from ApolloControllerOptions

Returns

ApolloQueryController<D, V>

Exports

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