Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

Components: 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

static

is

(read-only)
'apollo-client'

validateVariables

validate-variables
boolean

Whether to try to validate operations

When true, client will not fetch operations that do not have all their non-nullable variables set.

uri

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

typePolicies

TypePolicies | undefined

Type Policies for the client.

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

controllers

(read-only)
readonly (ApolloController)[]

List of all Apollo Controllers registered to this client.

client

ApolloClient<NormalizedCacheObject> | null

Reference to the ApolloClient instance.

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

Methods

public async

createApolloClient

Creates an Apollo client and assigns it to child elements

Returns


Events

Name Type Description
client-changed
CustomEvent<{ client: ApolloClient<NormalizedCacheObject> }>

The client changed

Private API

Private Properties

private

#typePolicies

TypePolicies | undefined

Private storage for the Type Policies

private

#instances

Set<ApolloController>

Private storage of child ApolloControllers

private

#client

ApolloClient<NormalizedCacheObject> | null

Private reference to the ApolloClient instance

Private Methods

private

onElementDisconnected

Performs clean up when the child disconnects

Parameters

event

ApolloEvent

Returns

void
private

onElementConnected

Assigns 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
private

initialize

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

Parameters

controller

ApolloController

Returns

void
private

findDeepInstances

Returns

void
private async

addDeepInstance

Parameters

child

Node

Returns

Promise<void>

Exports

import '@apollo-elements/components/apollo-client';
import { ApolloClientElement } from '@apollo-elements/components/apollo-client';