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
<apollo-client uri="/graphql"></apollo-client>
<apollo-client uri="/graphql" validate-variables></apollo-client>
<apollo-client id="client-a">
<apollo-mutation>
<!--...-->
</apollo-mutation>
</apollo-client>
<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> | nullReference to the ApolloClient instance.
Set the client property to update all of this element’s deep children.
controllers
(read-only)readonly (ApolloController)[]typePolicies
TypePolicies | undefinedType Policies for the client.
Set this property with a TypePolicies object to add them to the cache.
uri
string | undefined<apollo-client> will asynchronously
create a new ApolloClient instance with some default parametersvalidateVariables
booleanMethods
createApolloClient
publicasyncCreates an Apollo client and assigns it to child elementsReturns
Events
client-changed
CustomEvent<{ client: ApolloClient<NormalizedCacheObject> }>The client changed
Private Properties
#client
privateApolloClient<NormalizedCacheObject> | nullApolloClient instance#instances
privateSet<ApolloController>ApolloControllers#typePolicies
privateTypePolicies | undefined
Private Methods
findDeepInstances
privateReturns
voidaddDeepInstance
privateasyncParameters
child
NodeReturns
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
ApolloEventReturns
voidonElementDisconnected
privatePerforms clean up when the child disconnectsParameters
event
ApolloEventReturns
voidinitialize
privateSet the client on the element’s controller, and if it’s a query or subscription controller, attempt to subscribeParameters
controller
ApolloControllerReturns
voidExports
js ApolloClientElement from apollo-client.js
custom-element-definition from apollo-client.js