apollo-client

Use <apollo-client> for a declarative way to create a simple Apollo Client, or when you want to use a particular Apollo Client for a part of the DOM tree.

Live Demo

Reuse the same query component for two different GraphQL endpoints.

<apollo-client uri="https://api.spacex.land/graphql">
  <h2>SpaceX API Queries</h2>
  <introspection-queries></introspection-queries>
</apollo-client>

<apollo-client uri="https://rickandmortyapi.com/graphql">
  <h2>Rick and Morty API Queries</h2>
  <introspection-queries></introspection-queries>
</apollo-client>

<script type="module" src="introspection-queries.js"></script>

Provides an ApolloClient instance to all nested ApolloElement children, even across (open) shadow boundaries.

Examples

Generate a simple ApolloClient instance

<apollo-client uri="/graphql"></apollo-client>

Prevent network calls when required variables are absent

<apollo-client uri="/graphql" validate-variables></apollo-client>

Providing a client to a tree of Nodes

<apollo-client id="client-a">
  <apollo-mutation>
    <!--...-->
  </apollo-mutation>
</apollo-client>

Nesting separate clients

<apollo-client id="client-a">
  <query-element>
    <!-- This element queries from client-a's endpoint -->
  </query-element>
  <apollo-client id="client-b">
    <query-element>
      <!-- This element queries from client-b's endpoint -->
    </query-element>
  </apollo-client>
</apollo-client>

Properties

is

static(read-only)

'apollo-client'

client

ApolloClient<NormalizedCacheObject> | null

Reference to the ApolloClient instance.

Set the client property to update all of this element’s deep children.

controllers

(read-only)

readonly (ApolloController)[]

List of all Apollo Controllers registered to this client.

typePolicies

TypePolicies | undefined

Type Policies for the client.

Set this property with a TypePolicies object to add them to the cache.

uri

string | undefined

URI to the GraphQL server.When the URI attribute is set, <apollo-client> will asynchronously create a new ApolloClient instance with some default parameters

validateVariables

boolean

Whether to try to validate operationsWhen true, client will not fetch operations that do not have all their non-nullable variables set.

Methods

createApolloClient

publicasyncCreates an Apollo client and assigns it to child elements

Returns

Events

client-changed

CustomEvent<{ client: ApolloClient<NormalizedCacheObject> }>

The client changed

Private Properties

#client

private

ApolloClient<NormalizedCacheObject> | null

Private reference to the ApolloClient instance

#instances

private

Set<ApolloController>

Private storage of child ApolloControllers

#typePolicies

private

TypePolicies | undefined

Private storage for the Type Policies

Private Methods

findDeepInstances

private

Returns

void

addDeepInstance

privateasync

Parameters

child

Node

Returns

Promise<void>

onElementConnected

privateAssigns the element controller’s client instance to the child, and registers the child to receive the element’s new client when its set.

Parameters

event

ApolloEvent

Returns

void

onElementDisconnected

privatePerforms clean up when the child disconnects

Parameters

event

ApolloEvent

Returns

void

initialize

privateSet the client on the element’s controller, and if it’s a query or subscription controller, attempt to subscribe

Parameters

controller

ApolloController

Returns

void

Exports

js ApolloClientElement from apollo-client.js

custom-element-definition from apollo-client.js