❀Newbie Paintball Master
Have ideas to improve npm?Join in the discussion! Β»

@apollo-elements/fastTypeScript icon, indicating that this package has built-in type declarations

1.3.0Β β€’Β PublicΒ β€’Β Published

@apollo-elements/fast

Published on npm Published on webcomponents.org ISC License Release

πŸš€ FASTElement base classes that connect to your Apollo cache 🌜

πŸ‘©β€πŸš€ Launch your app at full speed! πŸ‘¨β€πŸš€

πŸ”Ž 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:

Imports
import { ApolloQuery, html, customElement } from '@apollo-elements/fast';

import HelloQuery from './Hello.query.graphql';

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

Then define your component's template. Make sure to set the query field, so your component starts fetching data automatically.

Read more about working with Queries

const template = html<HelloQueryElement>`
    <what-spin-such-loader ?active="${x => x.loading}"></what-spin-such-loader>
  ${x => (
    x.error ? html`
      <h1>😒 Such Sad, Very Error! 😰</h1>
      <pre><code>${error.message}</code></pre>`
  : html`
      <p>
        ${x.data?.helloWorld?.greeting ?? 'Hello'},
        ${x.data?.helloWorld?.name ?? 'Friend'}!
      </p>`
  )}
`;

@customElement({ name: 'hello-query', template })
export class HelloQueryElement extends ApolloQuery<Data, Variables> {
  query = 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.

Contact me on Codementor

Install

npm i @apollo-elements/fast

DownloadsWeekly Downloads

121

Version

1.3.0

License

ISC

Unpacked Size

103 kB

Total Files

31

Last publish

Collaborators

  • avatar