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>
import '@apollo-elements/components';
import { useQuery, component, html } from '@apollo-elements/haunted';
import { IntrospectionQueriesQuery } from './IntrospectionQueries.query.graphql.js';
function IntrospectionQueries(hostElement) {
const { data } = useQuery(IntrospectionQueriesQuery, { hostElement });
const fields = data?.__type?.fields ?? [];
return html`
<link rel="stylesheet" href="introspection-queries.css"/>
<ul>
${fields.map(({ name, description, args }) => html`
<li>
<strong class="${description ? 'described' : ''}">${name}</strong>
<span>${description}</span>
</li>
`)}
</ul>
`;
}
customElements.define('introspection-queries', component(IntrospectionQueries));
ul { margin: 0 }
strong.described::after { content: ': '; }
import { gql } from '@apollo/client/core';
export const IntrospectionQueriesQuery = gql` {
__type(name: "Query") {
fields {
name
description
}
}
}`;
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
(read-only)'apollo-client'
validateVariables
validate-variablesboolean
Whether to try to validate operations
When true, client will not fetch operations that do not have all their non-nullable variables set.
uri
uristring | 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
createApolloClient
Creates an Apollo client and assigns it to child elements
Returns
Events
| Name | Type | Description |
|---|---|---|
| client-changed | |
The client changed |
Private API
Private Properties
#typePolicies
TypePolicies | undefined
Private storage for the Type Policies
#instances
Set<ApolloController>
Private storage of child ApolloControllers
#client
ApolloClient<NormalizedCacheObject> | null
Private reference to the ApolloClient instance
Private Methods
onElementDisconnected
Performs clean up when the child disconnects
Parameters
event
ApolloEvent
Returns
void
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
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
findDeepInstances
Returns
void
addDeepInstance
Parameters
child
Node
Returns
Promise<void>
Exports
import '@apollo-elements/components/apollo-client';
import { ApolloClientElement } from '@apollo-elements/components/apollo-client';