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

documentType

static(read-only)
'document'|'query'|'mutation'|'subscription'

client

public
ApolloClient | null
The Apollo Client instance.

controller

public
ApolloController<D, V>

document

public
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.

data

public
Data<D> | null
Latest Data.

variables

public
Variables<D, V> | null
Operation variables.

error

public
Error | null
Latest error

errors

public
readonly GraphQLError[]
Latest errors

loading

public
boolean
Whether a request is in flight.

fetchPolicy

public
string | undefined
Fetch Policy for the operation.

context

public
Record<string, unknown> | undefined
Context passed to the link execution chain.

errorPolicy

public
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

readyToReceiveDocument

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

Events

apollo-element-connected

ApolloElementEvent
The element connected to the DOM

apollo-element-disconnected

ApolloElementEvent
The element disconnected from the DOM

Private Methods

documentChanged

protectedLifecycle callback that reacts to changes in the GraphQL document

Parameters

document

ComponentDocument<D, V> | null

Returns

void

variablesChanged

protectedLifecycle callback that reacts to changes in the operation variables

Parameters

variables

Variables<D, V> | null

Returns

void

Exports

js CustomElement from types.js

js ControllerHost from types.js

js ApolloElementElement from types.js

js ApolloMutationElement from types.js

js ApolloQueryElement from types.js

js ApolloSubscriptionElement from types.js

js GraphQLError from types.js