deep-graphql.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">

<!-- TODO: Different method types needed? Not just post, get, etc... -->

<dom-module id="deep-graphql">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <!-- TODO: How to make auto work with data input? It's triggering infinite loop. -->
    <!-- auto="[[auto]]" -->
    <iron-ajax
      id="ajax"
      url="[[url]]"
      headers="[[headers]]"
      handle-as="json"
      params="[[__query(data)]]"
      on-response="__formatData"
      debounce-duration="[[debounceDuration]]"
      reject-with-request
      with-auth
      bubbles
    ></iron-ajax>

  </template>

  <script>
    /**
     * `deep-graphql`
     * Polymer integration with GraphQL
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
     Polymer({
       is: 'deep-graphql',
       properties: {
         /*
          * Graphql data interface corresponding to { data: {...} }. This object
          * should be bound to a JSON object that needs to be hydrated. The
          * query will be extracted based on the JSON structure of the object.
          */
         data: {
           type: Object,
           value() {
             return {};
           },
           notify: true
         },
         /* Graphql service url */
         url: {
           type: String,
           value: '/graphql'
         },
         /* Request headers. */
         headers: Object,
         /* Pass-through to iron-ajax. Automatically triggers requests. */
         auto: {
           type: Boolean,
           value: false
         }
       },
       /**
        * Run query against the GraphQL service.
        * @param {Object} [json = this.data] - JSON structure one would like receive. The query
        * is computed based on the object structure to hydrate.
        * @return {Promise} - Resolves upon completion of the query with the data
        * object.
        */
       query(json = this.data) {
         this.$.ajax.params = this.__query(json || {});
         return this.$.ajax.generateRequest().completes.then(() => {
           // Success is handled by event handler attached to iron ajax
         }, (err) => {
           console.warn(`${this.localName}: GraphQL request failed for query: '${query}'.
            Data will default to what was passed.`);
           this.data = json || {};
         }).then(() => {
           return this.data;
         });
       },
       mutate(obj) {
         // TODO
       },
       /**
        * Format the user-defined query such that it conforms to GraphQL query
        * syntax.
        * @private
        * @param {Object} data - The object structure to hydrate.
        * @return {Object} - Formatted query or an empty object.
        */
       __query(data) {
         if (!Object.keys(data || {}).length) return {};
         return {query: this.__buildQuery(data)};
       },
       /**
        * Recursively build the query from object to construct query.
        * @private
        * @param {*} subject - Primitive type instance used to determine whether
        * it's needed in the query.
        * @return {String} - The relevant query result.
        */
       __buildQuery(subject) {
         // TODO Attempt DP implementation to gain experience with that. Execution speed
         // wont increase because of recursive subproblems not overlapping but would still
         // be awesome.
          if (typeof subject !== 'object') {
            return '';
          } else {
            let query = '';
            // An array is also considered an object using typeof
            if (Array.isArray(subject)) {
              if (subject.length) {
                // Grab fields from an arbitrary entry
                query = query.concat(this.__buildQuery(subject[0]));
              }
            } else {
              query = query.concat('{ ');
              for (const field in subject) {
                if (subject.hasOwnProperty(field)) {
                  query =
                    query.concat(` ${field} `).concat(this.__buildQuery(subject[field]));
                }
              }
              query = query.concat(' }');
            }
            return query;
          }
       },
       /**
        * Format the data for exposure through the public interface.
        * @private
        * @param {Event} e - Event triggered after ajax request completes.
        * @return {Object} - Formatted data object or {}.
        */
       __formatData(e) {
         if (!e || !e.detail || !e.detail.response) return {};
         this.data = e.detail.response.data || {};
       }
     });
  </script>
</dom-module>