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>
Exports
import '@apollo-elements/components/apollo-client';
import { ApolloClientElement } from '@apollo-elements/components/apollo-client';
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
client
ApolloClient<NormalizedCacheObject> | null
Reference to the ApolloClient
instance.
elements
(read-only)readonly ApolloElementElement[]
List of all ApolloElements registered to this client.
typePolicies
(optional)TypePolicies
Type Policies for the client.
uri
uristring
When the URI attribute is set, <apollo-client>
will asynchronously create a new ApolloClient instance with some default parameters.
validateVariables
validate-variablesboolean
When true, client will not fetch operations that do not have all their non-nullable variables set.
Methods
createApolloClient
Returns
Promise<ApolloClient<NormalizedCacheObject>>
A simple ApolloClient instance
Events
Name | Type | Description |
---|---|---|
client-changed |
|
Fired when the client instance changes. Compatible with Polymer-style two-way binding. |