FAST: ApolloQuery

ApolloQuery inherits from ApolloElement and implements the ApolloQueryInterface.

Read the query component guides for examples and tips.

import { ApolloQuery, customElement, html, repeat } from '@apollo-elements/fast';
import { styles } from './launches.css.js';
import { LaunchesQuery } from './Launches.query.graphql.js';
import { compose, map, propOr, unary } from './fp-helpers.js';

import '@apollo-elements/components/apollo-client';

const getLaunches = compose(
  unary(Array.from),
  propOr('launchesPast', []),
  propOr('data', null)
);

const getPatch = compose(propOr('mission_patch_small'), propOr('links'));

@customElement({
  name: 'spacex-launches',
  styles,
  template: html<Launches>`
    <ol>
      ${repeat(compose(getLaunches), html`
        <li>
          <article>
            <span>${propOr('mission_name', '')}</span>
            <img :src="${getPatch}" alt="Badge" role="presentation"/>
          </article>
        </li>
      `)}
    </ol>
  `,
})
class Launches extends ApolloQuery<typeof LaunchesQuery> {
  query = LaunchesQuery;

  variables = { limit: 3 };
}

ApolloQuery

🚀 Custom element base class that connects to your Apollo cache.

Properties

variables

Variables<D, V> | null

Query variables.

An object that maps from the name of a variable as used in the query GraphQL document to that variable's value.

noAutoSubscribe

no-auto-subscribe

boolean

nextFetchPolicy

next-fetch-policy

WatchQueryFetchPolicy | NextFetchPolicyFunction<D, V>

networkStatus

NetworkStatus

fetchPolicy

fetch-policy

WatchQueryFetchPolicy

errorPolicy

error-policy

ErrorPolicy

data

Data<D> | null

Latest query data.

Exports

import { ApolloQuery } from '@apollo-elements/fast/apollo-query';