Apollo Elements Guides API Blog

Getting Started

Apollo Elements apps use GraphQL and Apollo Client to manage their state. Each component in your app reads it's data from the graph with a query, and can change the state of the app with mutations or through one of the local state techniques.

Mutation DOM Data Query

Circular flow chart showing the essential UI loop for Apollo Elements apps: Queries fetch data from the server, render them via component templates to the DOM, where mutation components fire in response to user events, and update the Apollo cache, which in turn notifies connected query elements.

App Generator

Apollo Elements comes with an app and component generator. Start the generator with this command:

npm init @apollo-elements
npm init @apollo-elements -- app --pkg-manager yarn
pnpm init @apollo-elements

This starts a CLI wizard that asks you some questions about your app, then scaffold the project for you. The generated app comes with plenty of bells-and-whistles:

  • TypeScript
  • Linting with eslint and an opinionated ruleset
  • Buildless development workflow with @web/dev-server
    • support for importing GraphQL files with import MyQuery from './My.query.graphql'
    • support for importing CSS with import styles from './my-element.css'
  • Optimized production bundle
  • A basic Apollo Client instance
  • Simple, unopinionated SPA routing
  • Code-generated TypeScript typings for GraphQL documents

Check out the @apollo-elements/create documentation for more info.

package.json Scripts

These npm scripts help you get your work done in style:

start

Runs the code generator, the type checker, and the development server in watch mode

npm start

build

Bundles the app into /build. The production bundle is tree-shaken and code-split, and it minifies your javascript and HTML. Upload the /build directory to a static file host and you're good.

npm run build

lint

Lints your app with an opinionated set of rules for JavaScript and TypeScript

npm run lint

test

The generator doesn't currently offer strong opinions on testing your UI components, so npm test exits with an error code. For unit testing business logic (i.e. typePolicies), we recommend @web/test-runner