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.
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'
- support for importing GraphQL files with
- 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