Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @apollo-elements/haunted

@apollo-elements/haunted

Published on npm Published on webcomponents.org ISC License Release

👾 Haunted Hooks for Apollo GraphQL 🚀

View Live Demo

📓 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 useApolloClient, 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';

import type { ApolloQueryElement } from '@apollo-elements/haunted';

import type {
  HelloQueryData as Data,
  HelloQueryVariables as Variables
} from '../codegen/schema';

declare global {
  interface HTMLElementTagNameMap {
    'hello-query': ApolloQueryElement<Data, Variables>;
  }
}

Then define your component's template function.

function Hello() {
  const { data, error, loading } = useQuery<Data, Variables>(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 type { ApolloMutationElement } from '@apollo-elements/haunted';

import type {
  UpdateUserMutationData as Data,
  UpdateUserMutationVariables as Variables,
} from '../codegen/schema';

declare global {
  interface HTMLElementTagNameMap {
    'update-user': ApolloMutationElement<Data, Variables>;
  }
}

Then to define your component's template function.

function UpdateUser() {
  const [username, setUsername] = useState('');
  const [haircolor, setHaircolor] = useState('Black');
  const [updateUser, { data }] = useMutation<Data, Variables>(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 type { ApolloSubscriptionElement } from '@apollo-elements/haunted';

import type {
  NewsFlashData as Data,
  NewsFlashVariables as Variables,
} from '../codegen/schema';

declare global {
  interface HTMLElementTagNameMap {
    'news-flash': ApolloSubscriptionElement<Data, Variables>
  }
}
function NewsFlash() {
  const { data } = useSubscription<Data, Variables>(NewsFlashSubscription);

  return html`
    Latest News: ${data.news}
  `;
}

customElements.define('news-flash', component(NewsFlashSubscription));

👷‍♂️ Maintainers

apollo-elements is a community project maintained by Benny Powers.

Contact me on Codementor

Index

Type aliases

QueryHookOptions

QueryHookOptions<D, V>: Partial<Omit<ReactQueryHookOptions<D, V>, "data" | "displayName" | "error" | "fetchPolicy" | "nextFetchPolicy" | "ssr"> & { data: D | null; error: Error | ApolloError; fetchPolicy: FetchPolicy; nextFetchPolicy: FetchPolicy; noAutoSubscribe: boolean; shouldSubscribe: ApolloQueryElement["shouldSubscribe"] }>

Type parameters

  • D

  • V

SubscriptionHookOptions

SubscriptionHookOptions<D, V>: Partial<Omit<ReactSubscriptionHookOptions<D, V>, "client" | "fetchPolicy"> & { client: ApolloClient<NormalizedCacheObject>; fetchPolicy: FetchPolicy; noAutoSubscribe: boolean; onSubscriptionData: ApolloSubscriptionElement<D, V>["onSubscriptionData"]; shouldSubscribe: ApolloSubscriptionElement["shouldSubscribe"] }>

Type parameters

  • D

  • V

Variables

Const useMutation

useMutation: Object = hook(UseMutationHook)

Const useQuery

useQuery: Object = hook(UseQueryHook)

Const useSubscription

useSubscription: Object = hook(UseSubscriptionHook)