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' };
}
}
Properties
documentType
static(read-only)'document'|'query'|'mutation'|'subscription'
client
publicApolloClient | null
controller
publicApolloController<D, V>
document
publicComponentDocument<D, V> | null
graphql-tag
.data
publicData<D> | null
variables
publicVariables<D, V> | null
error
publicError | null
errors
publicreadonly GraphQLError[]
loading
publicboolean
fetchPolicy
publicstring | undefined
context
publicRecord<string, unknown> | undefined
errorPolicy
publicErrorPolicy | undefined
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 callnext
all
: errors are treated like data and will notify observables
readyToReceiveDocument
publicboolean
Events
apollo-element-connected
ApolloElementEvent
The element connected to the DOMapollo-element-disconnected
ApolloElementEvent
The element disconnected from the DOM
Private Methods
documentChanged
protectedLifecycle callback that reacts to changes in the GraphQL documentParameters
document
ComponentDocument<D, V> | null
Returns
void
variablesChanged
protectedLifecycle callback that reacts to changes in the operation variablesParameters
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