Neurological Phenomenon Multiplexer
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@apollo-elements/mixins

2.0.1 • Public • Published

@apollo-elements/mixins

Published on npm Published on webcomponents.org Actions Status

🍹 Moon mixins for cosmic components 👩‍🚀

A set of class mixin functions that add Apollo GraphQL goodness to your web component classes.

📓 Contents

🔧 Installation

Apollo element mixins are 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 system then run the following command in your project's root directory:

npm install --save @apollo-elements/mixins

Here's an example that uses HTMLElement

import { ApolloQueryMixin } from '@apollo-elements/mixins/apollo-query-mixin.js';
 
class VanillaQuery extends ApolloQueryMixin(HTMLElement) {
  get data() {
    return this.__data;
  }
 
  set data(data) {
    this.__data = data;
    this.shadowRoot.innerText = `${data.helloWorld.greeting}${data.helloWorld.name}`;
  }  
}

Aren't Mixins Considered Harmful?

Different kind of mixin. These are JS class mixins.

😎 Cool Tricks

📜 Inline Query Scripts

You can also provide a graphql query string in your markup by appending a graphql script element to your connected element, like so:

<connected-element>
  <script type="application/graphql">
    query {
      helloWorld {
        name
        greeting
      }
    }
  </script> 
</connected-element>

👷‍♂️ Maintainers

apollo-elements is a community project maintained by Benny Powers.

Contact me on Codementor

Install

npm i @apollo-elements/mixins

DownloadsWeekly Downloads

252

Version

2.0.1

License

ISC

Unpacked Size

380 kB

Total Files

68

Last publish

Collaborators

  • avatar