@apollo-elements/polymer

👩‍🚀🌛 Polymer Elements for Apollo GraphQL 🚀👨‍🚀

Usage no npm install needed!

<script type="module">
  import apolloElementsPolymer from 'https://cdn.skypack.dev/@apollo-elements/polymer';
</script>

README

@apollo-elements/polymer

Published on npm Published on webcomponents.org ISC License Release

🚀 Custom Elements with Polymer-style two-way binding from your Apollo cache 🌜

👩‍🚀 For developing with space-age Polymers 👨‍🚀

🔎 Read the Full API Docs 🔎

📓 Contents

🔧 Installation

apollo-elements are distributed through npm the node package manager. To install a copy of the latest version of these elements in your project's node_modules directory, first Install npm on your system, then run the following command in your project's root directory:

npm install --save @apollo-elements/polymer

@apollo-elements/polymer does not depend on @polymer/polymer. The components extend directly from HTMLElement, so they're suitable for use in any project, not just Polymer library apps.

👩‍🚀 Usage

See our docs on setting up Apollo client so your components can fetch their data.

Import the elements.

import '@apollo-elements/polymer/polymer-apollo-query';
import '@apollo-elements/polymer/polymer-apollo-mutation';

You can now use them in your polymer template:

<polymer-apollo-query
    data="{{data}}"
    variables="[[variables]]"
    query="[[UserQuery]]"
></polymer-apollo-query>

<paper-icon-item>
  <iron-image slot="item-icon">[[data.user.picture]]</iron-image>
  [[data.user.name]]
</paper-icon-item>

📚 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