Components

Utility components that help you factor your graphql-based app.

npm i -S @apollo-elements/components

yarn add @apollo-elements/components

pnpm add @apollo-elements/components

<apollo-client> provides all it's children (even across open shadow roots) with a client instance.
<apollo-mutation> lets you write declarative mutation components without subclassing.

<apollo-client uri="/graphql">
  <apollo-query>
    <script type="application/graphql">
      query QuoteQuery($name: String) {
        quote name
      }
    </script>
    <script type="application/json">
      {
        "name": "Neil Armstrong"
      }
    </script>
  </apollo-query>

  <apollo-mutation data-type="Quote">
    <script type="application/graphql">
      mutation QuoteMutation($name: String, $quote: String) {
        addQuote(name: $name, quote: $quote) {
          name
          quote
        }
      }
    </script>

    <label for="name">Name</label>
    <label for="comment">Comment</label>

    <input id="name"
           slot="variable"
           data-variable="name"
           value="Neil"/>
    <textarea id="comment"
              slot="variable"
              data-variable="quote"
              value="That's one small step..."></textarea>

    <button slot="trigger">OK</button>

  </apollo-mutation>
</apollo-client>