Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

Hybrids: Query Factory

import { query, define, html } from '@apollo-elements/hybrids';

import { UsersQuery } from './Users.query.graphql.js';

define('users-list', {
  users: query(UsersQuery),
  render: ({ users }) => html`
    <link rel="stylesheet" href="users-list.css">
    <ol>${(users.data?.users??[]).map(x => html`
      <li data-id="${x.id}">${x.name}</li>`)}
    </ol>
  `,
});

query

Hybrids property descriptor factory for GraphQL querys.

Parameters

queryDocument

ComponentDocument<D> | null

The query document.

options

ApolloQueryControllerOptions<D, V>

Options to control the query.

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


Exports

import { query } from '@apollo-elements/hybrids/factories/query';