Interfaces: ApolloElement

Common base interface for Apollo Elements. Provides reactivity for data, error, errors, loading, and variables fields.

Type Parameters

Every implemention of ApolloElement takes either one or two type parameters. A single parameter is either a TypedDocumentNode or the operation's result type, in which case the variables type defaults to OperationVariables, which is an object of arbitrary string keys and unknown values. If you pass two parameters, the first is the operation's result type, the second is the operation's variables type.

The following examples demonstrate passing type arguments to a query component.

import type { ResultOf, VariablesOf } from '@graphql-typed-document-node/core';
import { gql, TypedDocumentNode } from '@apollo/client/core';

interface Data { int: number; }
interface Variables { int: number; }

Example: Passing Two Type Arguments

const UntypedQuery = gql`query Query($int: Int) { int }`;

class UntypedElement extends ApolloQuery<Data, Variables> {
  query = UntypedQuery;

  checkClassFieldTypes() {
    // @ts-expect-error: `int` should be a number
    this.data = { int: 'a' };
    // @ts-expect-error: `int` should be a number
    this.variables = { int: 'b' };
  }
}

Example: Passing a Single Type Arguments

const TypedQuery: TypedDocumentNode<Data, Variables> = UntypedQuery;

class TypedElement extends ApolloQuery<typeof TypedQuery> {
  query = TypedQuery;

  checkClassFieldTypes() {
    // @ts-expect-error: `int` should be a number
    this.data = { int: 'a' };
    // @ts-expect-error: `int` should be a number
    this.variables = { int: 'b' };
  }
}

Common base interface for apollo elements

Properties

static

documentType

(read-only)

'document'|'query'|'mutation'|'subscription'

public

variables

Variables<D, V> | null

Operation variables.

public

readyToReceiveDocument

boolean

True when the element is connected and ready to receive its GraphQL document

public

loading

boolean

Whether a request is in flight.

public

fetchPolicy

fetch-policy

string | undefined

Fetch Policy for the operation.

public

errors

readonly GraphQLError[]

Latest errors

public

errorPolicy

error-policy

ErrorPolicy | undefined

Error Policy for the operation.

Much like fetchPolicy, errorPolicy allows you to control how GraphQL errors from the server are sent to your UI code. By default, the error policy treats any GraphQL Errors as network errors and ends the request chain. It doesn't save any data in the cache, and renders your UI with the error property set to an ApolloError. By changing this policy per request, you can adjust how GraphQL Errors are managed by your UI. The possible options for errorPolicy are:

none (default): any errors from the request are treated like runtime errors and the observable is stopped (XXX this is default to lower breaking changes going from AC 1.0 => 2.0)
ignore: errors from the request do not stop the observable, but also don't call next
all: errors are treated like data and will notify observables

public

error

Error | ApolloError | null

Latest error

public

document

ComponentDocument<D, V> | null

Operation document.

GraphQL operation document i.e. query, subscription, or mutation. Must be a parsed GraphQL DocumentNode, so use graphql-tag.

public

data

Data<D> | null

Latest Data.

public

controller

ApolloController<D, V>

public

context

Record<string, unknown> | undefined

Context passed to the link execution chain.

public

client

ApolloClient<NormalizedCacheObject> | null

The Apollo Client instance.

Events

Name	Type	Description
apollo-element-disconnected	`ApolloElementEvent`	The element disconnected from the DOM
apollo-element-connected	`ApolloElementEvent`	The element connected to the DOM

Private API

Private Methods

protected

variablesChanged

Lifecycle callback that reacts to changes in the operation variables

Parameters

variables

Variables<D, V> | null

Returns

void

protected

documentChanged

Lifecycle callback that reacts to changes in the GraphQL document

Parameters

document

ComponentDocument<D, V> | null

Returns

void

Exports

import {
  CustomElement,
  ControllerHost,
  ApolloElementElement,
  ApolloMutationElement,
  ApolloQueryElement,
  ApolloSubscriptionElement
} from '@apollo-elements/core/types';