Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

Interfaces: ApolloElement

Common base interface for Apollo Elements. Provides the ability to read GraphQL operations from HTML (via <script type="application/graphql"> and <script type="application/json"> tags) as well as 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' };
  }
}

Exports

import { ApolloElementInterface } from '@apollo-elements/interfaces/apollo-element';

Properties

client

ApolloClient<NormalizedCacheObject> | null

The Apollo Client instance

Defaults to window.__APOLLO_CLIENT__, which is set by default when creating an Apollo Client. That means that in most cases, it's not necessary to explicity set the client property. For more information see Getting Started: Apollo Client.

context

(optional)
Record<string, unknown>

Context passed to the link execution chain.

data

Data<D> | null

Latest data.

document

DocumentNode | TypedDocumentNode | null

Internal property corresponding to query, mutation, or subscription. Use those instead.

A GraphQL document containing a single query, mutation, or subscription. You can set it as a JavaScript property or by appending a GraphQL script to the element (light DOM). The document property should be considered internal and its use avoided.

static

documentType

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

Hint about what kind of component this is

error

(optional)
Error | ApolloError | null

Latest error

errorPolicy

(optional)
error-policy
ErrorPolicy

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: This is the default policy to match how Apollo Client 1.0 worked. Any GraphQL Errors are treated the same as network errors and any data is ignored from the response.
  • ignore: Ignore allows you to read any data that is returned alongside GraphQL Errors, but doesn't save the errors or report them to your UI.
  • all: Using the all policy is the best way to notify your users of potential issues while still showing as much data as possible from your server. It saves both data and errors so your UI can use them.

errors

(optional)
readonly GraphQLError[] | null

Latest errors.

fetchPolicy

(optional)
fetch-policy
boolean

Specifies the FetchPolicy to be used for this operation.

loading

boolean

Whether a request is in-flight.

variables

Variables<D, V> | null

Opeartion variables.

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

Methods

protected

documentChanged

(optional)

Lifecycle callback that reacts to changes in the GraphQL document.

Parameters

document

DocumentNode | TypedDocumentNode | null

The GraphQL document.

Returns

void
protected

variablesChanged

(optional)

Lifecycle callback that reacts to changes in the operation variables.

Parameters

variables

Variables<D, V> | null

The variables.

Returns

void

Events

Name Type Description
apollo-element-connected
CustomEvent<ApolloElement>

when the element connects to the DOM

apollo-element-disconnected
CustomEvent<ApolloElement>

when the element disconnects from the DOM