Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

Class Mixins: ApolloSubscriptionMixin

ApolloSubscriptionMixin applies ApolloElementMixin and the ApolloSubscriptionInterface.

Read the subscription component guides for examples and tips.

Exports

import { ApolloSubscriptionMixin } from '@apollo-elements/mixins/apollo-subscription-mixin';

Signature

ApolloSubscriptionMixin

Parameters

superclass

Constructor<CustomElement>

Returns

Constructor<ApolloSubscription>

Properties

client

inherited from ApolloElementInterface
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)
inherited from ApolloElementInterface
Record<string, unknown>

Context passed to the link execution chain.

data

inherited from ApolloElementInterface
Data<D> | null

Latest subscription data.

document

inherited from ApolloElementInterface
DocumentNode | TypedDocumentNode | null

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

static

documentType

inherited from ApolloElementInterface
'subscription'

Hint that this is a subscription component

error

(optional)
inherited from ApolloElementInterface
Error | ApolloError | null

Latest error

errorPolicy

(optional)
inherited from ApolloElementInterface
ErrorPolicy

Specifies the Error Policy to be used for this subscription.

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)
inherited from ApolloElementInterface
readonly GraphQLError[] | null

Latest errors.

fetchPolicy

inherited from ApolloSubscriptionInterface
FetchPolicy

Specifies the FetchPolicy to be used for this subscription.

loading

inherited from ApolloElementInterface
boolean

Whether a request is in-flight.

noAutoSubscribe

inherited from ApolloSubscriptionInterface no-auto-subscribe
boolean

If true, the element will not begin querying data until you manually call subscribe

notifyOnNetworkStatusChange

inherited from ApolloSubscriptionInterface
boolean

Whether or not updates to the network status should trigger next on the observer of this subscription.

observable

(optional)
inherited from ApolloSubscriptionInterface
Observable<FetchResult<Data<D>>>

Observable watching this element's subscription.

observableSubscription

inherited from ApolloSubscriptionInterface
ZenObservable.Subscription

Subscription to the observable

pollInterval

(optional)
inherited from ApolloSubscriptionInterface
number

The time interval (in milliseconds) on which this subscription should be refetched from the server.

shouldResubscribe

inherited from ApolloSubscriptionInterface
boolean | ((options: SubscriptionDataOptions<D, V>) => boolean)

Determines if your subscription should be unsubscribed and subscribed again.

skip

inherited from ApolloSubscriptionInterface
boolean

If skip is true, the query will be skipped entirely

subscription

inherited from ApolloSubscriptionInterface
DocumentNode | TypedDocumentNode

A GraphQL document containing a single subscription. You can set it as a JavaScript property or by appending a GraphQL script to the element (light DOM).

<script type="application/graphql">
  subscription { messages { text } }
</script>

variables

inherited from ApolloElementInterface
Variables<D, V> | null

An object map from variable name to variable value, where the variables are used within the GraphQL subscription. If the element has not yet subscribed and noAutoSubscribe is not set, setting variables causes the element to subscribe, otherwise, setting variables causes the query to refetch.

Methods

cancel

inherited from ApolloSubscriptionInterface

Cancels and clears the subscription

Returns

void
protected

documentChanged

(optional)
inherited from ApolloElementInterface

Lifecycle callback that reacts to changes in the GraphQL document.

Parameters

document

DocumentNode | TypedDocumentNode | null

The GraphQL document.

Returns

void

onError

(optional)
inherited from ApolloSubscriptionInterface

Callback for when an error occurs.

Parameters

error

Error

Returns

void

onSubscriptionComplete

(optional)
inherited from ApolloSubscriptionInterface

Callback for when subscription completes.

Returns

void

onSubscriptionData

(optional)
inherited from ApolloSubscriptionInterface

Callback for when subscription data updates.

Parameters

data

Data<D>

Returns

void
protected

shouldSubscribe

inherited from ApolloSubscriptionInterface

Determines whether the element should attempt to subscribe i.e. begin querying Override to prevent subscribing unless your conditions are met

Parameters

options

Partial<SubscriptionOptions<Variables<D, V>, Data<D>>>
Property Type Description
subscription
DocumentNode | TypedDocumentNode
See subscription
variables
Variables<D, V> 
See variables
fetchPolicy
FetchPolicy
See fetchPolicy
errorPolicy
ErrorPolicy
See errorPolicy
context
Record<string, unknown>
Context object passed through the link execution chain.

Returns

boolean

subscribe

inherited from ApolloSubscriptionInterface

Resets the observable and subscribes.

Parameters

params

Partial<SubscriptionDataOptions<D, V>>

Options for controlling how the subscription subscribes.

Option Type Description
client
ApolloClient
Apollo Client to use for the subscription.
context
Record<string, unknown>
Context object passed through the link execution chain.
errorPolicy
ErrorPolicy
Error policy to use for the subscription. See errorPolicy
fetchPolicy
FetchPolicy
See fetchPolicy
shouldResubscribe
boolean
Boolean, or a predicate function of SubscriptionDataOptions that determines if your subscription should be unsubscribed and subscribed again
skip
boolean
If skip is true, the subscription will be skipped entirely.
subscription
DocumentNode | TypedDocumentNode
GraphQL document with a single subscription.
variables
Variables<D, V> 
An object containing all of the variables your subscription needs to execute.

Returns

void
protected

variablesChanged

(optional)
inherited from ApolloElementInterface

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

apollo-error
CustomEvent<ApolloError>

when the mutation rejects

apollo-subscription-result
CustomEvent<FetchResult<Data<D>>>

when the subscription resolves