@apollo-elements/haunted
π Read the Full API Docsπ
π Contents
π§ Installation
Apollo Elements haunted hooks are distributed through npm
, the node package manager. To install a copy of the latest version in your project's node_modules
directory, install npm on your system then run the following command in your project's root directory:
npm install --save @apollo-elements/haunted
π©βπ Usage
See our docs on setting up Apollo client so your components can fetch their data.
This package provides useMutation
, useQuery
, and useSubscription
hooks.
β Queries
Query data with the useQuery
hook.
First, let's define our component's GraphQL query.
query HelloQuery {
helloWorld {
name
greeting
}
}
Read our docs on working with GraphQL files during development and in production for more info, and be sure to read about generating TypeScript types from GraphQL to enhance your developer experience and reduce bugs.
Next, we'll define our UI component with the useQuery
hook. Import the hook and helpers, your query, and the types:
Imports
import { useQuery, component, html } from '@apollo-elements/haunted';
import { HelloQuery } from './Hello.query.graphql';
declare global {
interface HTMLElementTagNameMap {
'hello-query': HTMLElement
}
}
Then define your component's template function.
function Hello() {
const { data, error, loading } = useQuery(HelloQuery);
const greeting = data?.helloWorld.greeting ?? 'Hello';
const name = data?.helloWorld.name ?? 'Friend';
return html`
<what-spin-such-loader ?active="${loading}"></what-spin-such-loader>
<article id="error" ?hidden="${!error}">
<h2>π’ Such Sad, Very Error! π°</h2>
<pre><code>${error?.message}</code></pre>
</article>
<p>${greeting}, ${name}!</p>
`;
}
customElements.define('hello-query', component(Hello));
πΎ Mutations
Mutations are how you affect change on your graph. Define a mutation in graphql.
mutation UpdateUser($username: String, $haircolor: String) {
updateUser(username: $username, haircolor: $haircolor) {
nickname
}
}
Then import useMutation
and the haunted
API along with your data types.
Imports
import { useMutation, useState, component, html } from '@apollo-elements/haunted';
import { UpdateUserMutation } from './UpdateUser.mutation.graphql';
declare global {
interface HTMLElementTagNameMap {
'update-user': HTMLElement;
}
}
Then to define your component's template function.
function UpdateUser() {
const [username, setUsername] = useState('');
const [haircolor, setHaircolor] = useState('Black');
const [updateUser, { data }] = useMutation(UpdateUserMutation);
const variables = { username, haircolor };
const nickname = data?.updateUser?.nickname ?? 'nothing';
return html`
<label> Name
<input type="text" @input="${e => setUsername(e.target.value)}"/>
</label>
<label> Hair Colour
<select @input="${e => setHaircolor(e.target.value)}">
<option>Black</option>
<option>Brown</option>
<option>Auburn</option>
<option>Red</option>
<option>Blond</option>
<option>Tutti Fruiti</option>
</select>
</label>
<button @click="${() => updateUser({ variables })}">Save</button>
<output ?hidden="${!data}">We'll call you ${nickname}</output>
`;
}
customElements.define('update-user', component(UpdateUser));
π Subscriptions
Subscriptions let you update your front end with real-time changes to the data graph.
subscription NewsFlash {
news
}
Imports
import { useSubscription, component, html } from '@apollo-elements/haunted';
import { NewsFlashSubscription } from './NewsFlash.subscription.graphql';
declare global {
interface HTMLElementTagNameMap {
'news-flash': HTMLElement;
}
}
function NewsFlash() {
const { data } = useSubscription(NewsFlashSubscription);
return html`
Latest News: ${data.news}
`;
}
customElements.define('news-flash', component(NewsFlashSubscription));
π² With Apollo Client
If you want your haunted components to register with the closest <apollo-client>
element, you have to write them using the function
keyword and pass this
as the hostElement
option.
function Connected() {
const { data } = useQuery(ConnectedQuery, {
hostElement: this,
});
}
That way, <apollo-client>
will be able to find your element in the DOM tree and connect to the controller which powers the hook.
π·ββοΈ Maintainers
apollo-elements
is a community project maintained by Benny Powers.