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

string

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

validateVariables

validate-variables

boolean

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

Methods

async

createApolloClient

Returns

Promise<ApolloClient<NormalizedCacheObject>>

A simple ApolloClient instance

Events

Name	Type	Description
client-changed	`CustomEvent<{ value: ApolloClient, client: ApolloClient }>`	Fired when the client instance changes. Compatible with Polymer-style two-way binding.

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!