Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@apollo-elements/create

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@apollo-elements/create

Scaffold apps and components with GraphQL and Lit

  • 2.0.0-next.4
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

@apollo-elements/create

command output in terminal

Published on npm Published on webcomponents.org ISC License Release

⚡️ App and Component Generator for Apollo Elements 🚀

🔎 Read the Full API Docs 🔎

To quickly get started with apollo-elements, generate a skeleton app with this command

npm init @apollo-elements

Which will prompt you to generate a full app, or a component thereof.

App Generator

npm init @apollo-elements -- app

Generate an Apollo Elements Skeleton App

Example

npm init @apollo-elements -- \
  app \
    --pkg-manager yarn \
    --uri '/graphql' \
    --install \
    --start \
    --yes

Options

FlagDescriptiontypedefault
--helpShow helpboolean
--versionShow version numberboolean
--pkg-managerPreferred package managernpm or yarnnpm
--uri, -uURI to your GraphQL endpointstring
--yes, -yUse default package.json fields (e.g. author, license)boolean
--skip-codegenSkip the codegen phasestringfalse
--install, -iAutomatically install dependenciesboolean
--start, -sLaunch the dev server after scaffoldingboolean

🔋 Batteries Included

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
  • Minified production bundle
  • A basic Apollo Client instance
  • Simple, unopinionated SPA routing
  • Code-generated TypeScript typings for GraphQL documents
  • import MyQuery from './My.query.graphql'
  • import styles from './my-element.css'

🛎 Scripts

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

npm start
yarn start

runs the code generator and the development server in watch mode

npm run build
yarn build

bundles the app into /build. The build will bundle and minify your javascript, and minify your HTML. Just upload to your static file host and you're good.

npm run lint
yarn lint

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

npm test
yarn test

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

Component Generator

npm init @apollo-elements -- component

Generate an Apollo Element

Example

npm init @apollo-elements -- \
  component \
    --type mutation \
    --name x-user-profile \
    --subdir user \
    --schema-path '#schema' \
    --shared-css-path '#components/shared.css' \
    --variables '$input: UpdateProfileInput!' \
    --fields 'updateProfile(input: $input) { id }' \
    --skip-codegen
    --yes

Options

FlagDescriptiontypedefault
--helpShow helpboolean
--versionShow version numberboolean
--pkg-managerPreferred package managernpm or yarnnpm
--type, -tElement typequery, mutation, or subscriptionquery
--name, -nCustom element tag namestring
--subdir, -dOptional subdir under src/componentsstring
--yes, -yOptional subdir under src/componentsbooleanfalse
--skip-codegenSkip the codegen phasebooleanfalse
--schema-pathOptional custom path to schema types filestring
--shared-css-pathOptional custom path to shared component styles filestring
--variablesOptional custom variables e.g. input: $UpdateUserInputstring
--fieldsOptional custom fields e.g. id name picture { alt url }string

Keywords

FAQs

Package last updated on 27 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc