@apollo-elements/fast
🔎 Read the Full API Docs🔎
📓 Contents
🔧 Installation
Apollo elements' fast is 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 computer then run the following command in your project's root directory:
npm install --save @apollo-elements/fast
👩🚀 Usage
See our docs on setting up Apollo client so your components can fetch their data.
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. Import the base class and helpers, query, and types, then define your component's template. Add an ApolloQueryBehavior with a query to automatically subscribe when your element connects.
Read more about working with Queries
import type { Binding, ViewTemplate } from '@apollo-elements/fast';
import { ApolloQueryBehavior } from '@apollo-elements/fast';
import { FASTElement, customElement, html, when } from '@apollo-elements/fast';
import { HelloQuery } from './Hello.query.graphql';
import { not } from 'fp-ts/function';
type B = Binding<HelloQueryElement>;
const isLoading: B = x => x.hello.loading;
const hasError: B = x => !!x.hello.error;
const getErrorMessage: B = x => x.hello.error.message;
const getDataPropOr = (prop: string, or: string): B => x =>
x.hello.data?.helloWorld?.[prop] ?? or;
const template: ViewTemplate<HelloQueryElement> = html`
<what-spin-such-loader ?active="${isLoading}"></what-spin-such-loader>
${when(hasError, html`
<h1>😢 Such Sad, Very Error! 😰</h1>
<pre><code>${getErrorMessage}</code></pre>`)}
${when(not(hasError), html`
<p>
${getDataPropOr('greeting', 'Hello')},
${getDataPropOr('name', 'Friend')}!
</p>`)}
`;
@customElement({ name: 'hello-query', template })
export class HelloQueryElement extends FASTElement {
hello = new ApolloQueryBehavior(this, HelloQuery);
}
📚 Other Libraries
Looking for other libraries? Want to use Apollo with vanilla extends HTMLElement components? Check out our docs site
👷♂️ Maintainers
apollo-elements is a community project maintained by Benny Powers.
