graphql-engine/docs/_theme/djangodocs/layout.html

{% extends "basic/layout.html" %}

{%- if pagename == 'index' %}
  {% set is_landing_page = true %}
{%- endif %}

{% set css_files = css_files + ['_static/hasura-custom.css', '_static/djangosite.css'] %}

{%- if is_landing_page %}
  {% set css_files = css_files + ['_static/landing.css'] %}
{%- endif %}

{%- macro secondnav() %}
  {%- if prev %}
    &laquo; <a href="{{ prev.link|e }}" title="{{ prev.title|e }}">previous</a>
    {{ reldelim2 }}
  {%- endif %}
  {%- if next %}
    <a href="{{ next.link|e }}" title="{{ next.title|e }}">next</a> &raquo;
  {%- endif %}
{%- endmacro %}

{% block linktags %}
{{ super() }}
    <link rel="canonical" href="https://{{ BASE_DOMAIN }}/docs/1.0/{{ pagename }}{{ file_suffix }}" />
{% endblock %}

{% block document %}
  <div id="custom-doc" class="{% block bodyclass %}{{ 'yui-t6' if not is_landing_page else '' }}{% endblock %}">
    <div class="main_container_wrapper">
      {% include 'pages/loading.html' %}
      <div id="banner" class="bannerStripWrapper hide">
        <div class='bannerInnerWrapper displayFlex'>
          <a
            href="https://hasura.io/events/data-federation-hasura-graphql/#webinar-register"
            target="_blank"
            rel="noreferrer noopener"
          >
            <div class="bannerStrip">
              <div class="displayFlex noPadd">
                <div class="announceIcon">
                  <img src="{{ pathto('_images/layout/webinar.svg', 1) }}" alt="webinar"/>
                </div>
                <div class="bodyTextSmall">
                  Hasura Remote Joins is now in Beta: <span class='fontNormal'>Sign up for our Webinar to learn more<span class='mLeft15'>·</span></span><span class='underLine mLeft15'>Register now</span>
                </div>
              </div>
            </div>
          </a>
          <div id="banner-close" class="closeBanner">
            <img src="{{ pathto('_images/layout/webinar-close.svg', 1) }}" alt="Close" />
          </div>
        </div>
        <!--
        <div class='bannerStripImg'>
          <img src="{{ pathto('_images/layout/stripe.png', 1) }}" alt='stripe' />
        </div>
        -->
      </div>
      <header
        id="header"
        class='blueBgColor boderBottom'
      >
        <div class="navContainerWrapper noPadd">
          <div class="headerWrapper">
            <div class="navLeft">
              <div class="brand">
                <a href="https://hasura.io/">
                  <img src="{{ pathto('_images/layout/white-logo.svg', 1) }}" alt="Logo"/>
                </a>
              </div>
              <a href="https://discordapp.com/invite/hasura" target="_blank" rel="noopener noreferrer">
                <div class="discordBtn">
                  <img src="{{ pathto('_images/layout/discord-brands-block.svg', 1) }}" alt="Discord"/>
                </div>
              </a>
              <a href="https://twitter.com/hasurahq" target="_blank" rel="noopener noreferrer">
                <div class="twitterBtn">
                  <img src="{{ pathto('_images/layout/twitter-brands-block.svg', 1) }}" alt="Twitter"/>
                </div>
              </a>
            </div>
            <div class="navBlueBG">
              <ul class="navBarUL">
                <li class='navListActive'>
                  <span class="versionTxt">
                    <select value="{{ version }}" onchange="location = this.value;" class="selected" aria-label="Select Version">
                      {%- if version == '1.0' %}
                        <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html" selected="selected">v1.x</option>
                      {%- else -%}
                        <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html">v1.x</option>
                      {% endif %}
                    </select>
                  </span>
                  <a href="/docs/">Docs</a>
                </li>
                <li>
                  <a href='https://hasura.io/blog/'>
                    Blog
                  </a>
                </li>
                <li>
                  <a href="https://hasura.io/learn/">
                    Tutorials
                  </a>
                </li>
                <li>
                  <a href="https://hasura.io/enterprise/">
                    Enterprise
                  </a>
                </li>
                <li>
                  <a href="https://hasura.io/hasura-pro/">
                    Hasura Pro
                  </a>
                </li>
                <li>
                  <a href="https://hasura.io/pricing/">
                    Pricing
                  </a>
                </li>
                <li>
                  <a href='https://hasura.io/docs/1.0/graphql/manual/getting-started/index.html'>
                    <button class="commonBtn navBtnHome">
                      Get Started
                    </button>
                  </a>
                </li>
                <li>
                  <a
                    href='https://calendly.com/hasura/prod-expert-call'
                  >
                    <button class="commonBtn navBtnContactHome">
                      Talk to a Product Expert
                    </button>
                  </a>
                </li>
              </ul>
            </div>
            <div class='navBlueBG'>
              <span class="navBarToggle"
                onclick="openMenu()"
              >
                <span class="iconBar"></span>
                <span class="iconBar"></span>
                <span class="iconBar"></span>
              </span>
            </div>
            <div id="navbar" class="topnav">
              <div class="visibleMobile">
                <ul class="navBarULMobile">
                  <li>
                    <a href="/docs/">
                      onclick="openMenu()"
                    >Docs</a>
                    <span class="versionTxt">
                      <select value="{{ version }}" onchange="location = this.value;" class="selected" aria-label="Select Version">
                        {%- if version == '1.0' %}
                          <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html" selected="selected">v1.x</option>
                        {%- else -%}
                          <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html">v1.x</option>
                        {% endif %}
                      </select>
                    </span>
                  </li>
                  <li>
                    <a href='https://hasura.io/blog/'
                      onclick="openMenu()"
                    >
                      Blog
                    </a>
                  </li>
                  <li>
                    <a href='https://hasura.io/learn/'
                      onclick="openMenu()"
                    >
                      Tutorials
                    </a>
                  </li>
                  <li>
                    <a href="https://hasura.io/enterprise/"
                      onclick="openMenu()"
                    >
                      Enterprise
                    </a>
                  </li>
                  <li>
                    <a href="https://hasura.io/hasura-pro/"
                      onclick="openMenu()"
                    >
                      Hasura Pro
                    </a>
                  </li>
                  <li>
                    <a href="https://hasura.io/pricing/"
                      onclick="openMenu()"
                    >
                      Pricing
                    </a>
                  </li>
                  <li>
                    <a href='https://hasura.io/docs/1.0/graphql/manual/getting-started/index.html'
                      onclick="openMenu()"
                    >
                      <button class='commonBtn navBtnHome'>
                        Get Started
                      </button>
                    </a>
                  </li>
                  <li>
                    <a href="https://calendly.com/hasura/prod-expert-call"
                      onclick="openMenu()"
                    >
                      <button class="commonBtn navBtnContactHome">
                        Talk to a Product Expert
                      </button>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div id="" class="content_wrapper">
        {%- if is_landing_page %}
          {% include 'pages/landing.html' %}
        {%- else %}
          {% set rootpage = 'common' %}
          {% set pagenameSplit = pagename.split('/') %}

          {% block sidebarwrapper %}
            <div class="yui-b mobile-hide" id="sidebar">
              <div id='sidebar-close' class='mobile-only closeIcon'>
                <img src="{{ pathto('_images/layout/close-icon.svg', 1) }}" alt="Close"/>
              </div>
              {{ sidebar() }}
            </div>
          {% endblock %}

          <div class="content_inner_wrapper">
            <div role="main" parent={{ rootpage }}>

              <div id="docs-header">
                <!--
                <div class="mobile-only" id="mobile-logo">
                  <a href="https://{{ BASE_DOMAIN }}/" target="_blank" rel="noopener">
                    <div class="img_wrapper inline-block">
                      <img class="responsive logo_img no-shadow" src="{{ pathto('_images/layout/logo-dark.svg', 1) }}" alt="Hasura Logo Dark" />
                    </div>
                  </a>
                  <a href="https://{{ BASE_DOMAIN }}/docs" class="docs_label mobile-logo-docs">DOCS&nbsp;&nbsp;v{{version}}</a>
                </div>
                -->
                <div id="docs-header-actions">
                  <div class="inline-block" id="input_search_box">
                    <span class="fa fa-search search_icon"></span>
                    <input type="text" id="search_element" placeholder="Search docs..." />
                  </div>
                  <div class="inline-block mobile-only" id="nav_tree_icon">
                    <div class="docs-menu">
                      DOCS MENU >
                    </div>
                  </div>
                  <!--
                  <div class="inline-block header_links">
                    <div class="social_icons_wrapper">
                      <div class="social_icons">
                        <a href="https://hasura.io/learn/" target="_blank" rel="noopener">
                          Tutorials
                        </a>
                      </div>
                      <div class="social_icons">
                        <a href="https://twitter.com/hasurahq/" target="_blank" rel="noopener">
                          <img class="responsive" src="{{ pathto('_images/layout/Twitter.svg', 1) }}" alt="Twitter icon" />
                        </a>
                      </div>
                      <div class="social_icons tooltip">
                        <a href="https://discord.gg/vBPpJkS" target="_blank" rel="noopener">
                          <img class="responsive" src="{{ pathto('_images/layout/Discord.svg', 1) }}" alt="Discord icon" />
                        </a>
                        <span class="tooltip_text">Get instant support on our discord server</span>
                      </div>
                    </div>
                  </div>
                  -->
                </div>
              </div>

              <div id="docs-content">
                <div id="{{ pagename|replace('/', '-') }}">
                  {% block body %}{% endblock %}
                </div>
              </div>

              <div class="nav">{{ secondnav() }}</div>

              <div class="feedback_wrapper">
                <div class="feedback">
                  Was this page helpful?
                  <!-- inline svgs to allow color manipulation on hover -->
                  <div class="display_inl actions thumb_up">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="21px" height="21px" viewBox="0 0 561 561" style="enable-background:new 0 0 561 561;" xml:space="preserve">
                      <g>
	                    <g id="thumb-up">
		                  <path d="M0,535.5h102v-306H0V535.5z M561,255c0-28.05-22.95-51-51-51H349.35l25.5-117.3c0-2.55,0-5.1,0-7.65    c0-10.2-5.1-20.4-10.199-28.05L336.6,25.5L168.3,193.8c-10.2,7.65-15.3,20.4-15.3,35.7v255c0,28.05,22.95,51,51,51h229.5    c20.4,0,38.25-12.75,45.9-30.6l76.5-181.051c2.55-5.1,2.55-12.75,2.55-17.85v-51H561C561,257.55,561,255,561,255z" fill="#787878"/>
	                    </g>
                      </g>
                    </svg>
                  </div>
                  <div class="display_inl actions thumb_down">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_2" x="0px" y="0px" width="21px" height="21px" viewBox="0 0 561 561" style="enable-background:new 0 0 561 561;" xml:space="preserve">
                      <g>
                        <g id="thumb-down">
                            <path d="M357,25.5H127.5c-20.4,0-38.25,12.75-45.9,30.6L5.1,237.15C2.55,242.25,0,247.35,0,255v48.45l0,0V306    c0,28.05,22.95,51,51,51h160.65l-25.5,117.3c0,2.55,0,5.101,0,7.65c0,10.2,5.1,20.399,10.2,28.05l28.05,25.5l168.3-168.3    c10.2-10.2,15.3-22.95,15.3-35.7v-255C408,48.45,385.05,25.5,357,25.5z M459,25.5v306h102v-306H459z" fill="#787878"/>
                        </g>
                      </g>
                    </svg>
                  </div>
                </div>
                <div class="detailed_feedback hide">
                  <div class="feedback_detail_msg"></div>
                  <textarea rows="4" cols="75" id="feedback_box" data-id="0"></textarea>
                  <br/>
                  <button class="feedback_btn">Submit</button>
                </div>
                <div class="thank_you hide">
                  Thank you for your feedback!
                </div>
              </div>
              <div class="subscribe-form-wrapper">
                <div id="mc_embed_signup">
                  <div class="subscribe-form-content">
                    Stay up to date with product & security updates
                  </div>
                  <form action="https://hasura.us13.list-manage.com/subscribe/post?u=9b63e92a98ecdc99732456b0e&amp;id=f5c4f66bcf" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate post-subscription-form mailchimp-form" target="_blank" rel="noopener" novalidate>
                    <div id="mc_embed_signup_scroll" class="full-width">
                      <div class="input-box">
                        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email Address" aria-label="Subscribe">
                      </div>
                      <div id="mce-responses" class="clear display-inline">
                        <div class="response error-message" id="mce-error-response" style="display:none"></div>
                        <div class="response success-message" id="mce-success-response" style="display:none"></div>
                      </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9b63e92a98ecdc99732456b0e_f5c4f66bcf" tabindex="-1" value=""></div>
                      <div class="clear submit-box">
                      <input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe">
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <div class="footer-hasura-custom">
                <img class="responsive footer_logo" src="{{ pathto('_images/layout/hasura_logo.svg', 1) }}" alt="Hasura Logo Dark"/>
                <div class="footer_text">
                  <div>Want to contribute or report missing content?</div>
                  <div>
                    <a target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine/blob/master/docs/{{ pagename }}.rst">edit this page on github</a>
                    | <a target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine/blob/master/CONTRIBUTING.md">contributing guidelines</a>
                    | <a target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine/issues">report an issue</a>
                  </div>
                  <br/>
                  <div>
                    <a target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine">Hasura GraphQL engine</a> is open source. <a target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine/blob/master/LICENSE">See license</a>
                  </div>
                  <div>
                    Powered by <a target="_blank" rel="noopener" href="http://www.sphinx-doc.org">Sphinx</a>.
                    |  Copyright &copy; 2020 <a target="_blank" rel="noopener" href="https://hasura.io">Hasura</a>.
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="clear: both;"></div>
        {%- endif %}
      </div>
    </div>
  </div>
{% endblock %}

{% block sidebarrel %}
{% endblock %}

{# Empty some default blocks out #}
{% block relbar1 %}{% endblock %}
{% block relbar2 %}{% endblock %}
{% block sidebar1 %}{% endblock %}
{% block sidebar2 %}{% endblock %}
{% block footer %}

  <!-- intercom -->
  <script>
    window.intercomSettings = {
      app_id: "rucirpb3"
    };
  </script>
  <script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/rucirpb3';var
    x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()
  </script>

  <!-- support button -->
  <script type="text/javascript">
    $(document).ready( function() {
      const supportBtnHandler = function() {
        if ( window.Intercom ) {
          window.Intercom('show');
        }
      };
      $('.supportBtn').on('click', supportBtnHandler);
    });
  </script>

  <!-- Local storage -->
  <script type="text/javascript">
    $(document).ready( function() {
      const bannerLocalStorageKey = 'remoteJoinsWebinarBannerDismissed';	    
      const bannerDismissed = window.localStorage.getItem(bannerLocalStorageKey);
      if (bannerDismissed !== "yes") {
        $('#banner').removeClass("hide");
      }
      $('#banner-close').click(function(e){
        window.localStorage.setItem(bannerLocalStorageKey, 'yes');
        $('#banner').hide();
      });
    });
  </script>

  <!--Hamburger menu-->
  <script type="text/javascript">
    function openMenu() {
      var x = document.getElementById("navbar");
      if (x.className === "topnav") {
        x.className += " responsive"
      } else {
        x.className = "topnav"
      }
    }
  </script>

  <!-- utils -->
  <script type="text/javascript">
    // load script file
    const loadScript = function(url, callback) {
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;

      // Then bind the event to the callback function.
      // There are several events for cross browser compatibility.
      script.onreadystatechange = callback;
      script.onload = callback;

      // Fire the loading
      head.appendChild(script);
    };

    // load css file
    const loadCss = function(url, callback) {
      var head = document.getElementsByTagName('head')[0];
      var link = document.createElement('link');
      link.type = 'text/css';
      link.rel = 'stylesheet';
      link.href = url;

      // Then bind the event to the callback function.
      // There are several events for cross browser compatibility.
      link.onreadystatechange = callback;
      link.onload = callback;

      // Fire the loading
      head.appendChild(link);
    };

    // make ajax call
    const promise_ajax = function(url, data, type) {
      return new Promise(function(resolve, reject) {
        var req = new XMLHttpRequest();
        req.open(type, url, true);
        req.setRequestHeader("Content-type", "application/json");
        req.onload = function() {
          if (req.status === 200) {
            resolve(req.response);
          } else {
            reject(req.response);
          }
        };
        req.onerror = function() {
          reject(Error("Network Error"));
        };
        // Make the request
        req.send(JSON.stringify(data));
      });
    };

    // Track GA event
    const trackga = function ( category, action, label, value ) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'Click Events',
        category: category,
        action: action,
        label: label,
        value: value
      })
    };
  </script>

  <!-- search -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
  <script type="text/javascript">
    docsearch({
      appId: 'WCBB1VVLRC',
      apiKey: '298d448cd9d7ed93fbab395658da19e8',
      indexName: 'graphql-docs-prod',
      inputSelector: '#search_element',
      transformData: function(suggestions) {
        if (window.location.origin !== 'https://hasura.io') {
          suggestions.forEach(suggestion => {
            if (window.location.origin === 'http://localhost:8000') {
              suggestion.url = suggestion.url.replace(/https:\/\/hasura.io\/docs\/[^\/]*/, window.location.origin)
            } else {
              suggestion.url = suggestion.url.replace('https://hasura.io\/docs', window.location.origin);
            }
          });
        }

        return suggestions;
      },
      // algoliaOptions: {
      //   hitsPerPage: 10
      // },
      debug: false
    });
  </script>

  <!-- mobile sidebar -->
  <script type="text/javascript">
    $(document).ready( function() {
      const navTreeHandler = function(e) {
        const sidebar = $('#sidebar');
        const background = $('.content_inner_wrapper');
        const body = $('body');

        if (sidebar.hasClass('mobile-hide')) {
          sidebar.removeClass('mobile-hide');
          background.addClass('no_scroll');
          body.addClass('no_scroll');
        } else {
          sidebar.addClass('mobile-hide');
          background.removeClass('no_scroll');
          body.removeClass('no_scroll');
        }
      };
      $('#nav_tree_icon').on('click', navTreeHandler);
      $('#sidebar-close').on('click', navTreeHandler);
    });
  </script>

  <!-- mailchimp -->
  <script type="text/javascript">
    $(document).ready( function() {
        loadCss('//cdn-images.mailchimp.com/embedcode/classic-10_7.css', function(){});
        loadScript("{{ pathto('_static/mailchimp/mc-validate.min.js', 1) }}", function(){});
    });
  </script>
  <script type='text/javascript'>
    (function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';}(jQuery));
  </script>

  <!-- feedback -->
  <script type="text/javascript">
    $(document).ready( function() {
      var baseDomain = "{{ BASE_DOMAIN }}";
      const feedbackUrl = baseDomain ? 'https://data.' + baseDomain + '/v1/query' : 'https://data.hasura-stg.hasura-app.io/v1/query';

      const sendFeedback = function(feedback, feedbackDetailMsg) {
        const insertQuery = {
          'type': 'insert',
          'args': {
            'table': 'docs_feedback',
            'objects': [
              {
                'page': window.location.pathname,
                'feedback': feedback
              }
            ],
            'returning': ['id']
          }
        };

        promise_ajax(feedbackUrl, insertQuery, 'POST')
          .then( function(response) {
            const data = JSON.parse(response);

            $('#feedback_box').data('id', data['returning'][0]['id']);
            $('.feedback_detail_msg').html(feedbackDetailMsg);
            $('.feedback').addClass('hide');
            $('.detailed_feedback').removeClass('hide');
          })
          .catch( function(err) {
            alert('Error capturing feedback');
            console.log(err);
          });
      };

      const handleThumbUpClick = function(e) {
        sendFeedback('positive', 'Great to hear that. Would you like to share any other feedback:');
      };
      $('.thumb_up').on('click', handleThumbUpClick);

      const handleThumbDownClick = function(e) {
        sendFeedback('negative', 'Sorry to hear that. Could you please tell us what you were looking for:');
      };
      $('.thumb_down').on('click', handleThumbDownClick);

      const handleFeedbackBtnClick = function(e) {
        const feedbackBox = $('#feedback_box');
        const feedbackId = feedbackBox.data('id');
        const feedbackContent = feedbackBox.val();

        const updateQuery = {
          'type': 'update',
          'args': {
            'table': 'docs_feedback',
            '$set': {
              'feedback_content': feedbackContent
            },
            'where': {'id': feedbackId}
          }
        };

        promise_ajax(feedbackUrl, updateQuery, 'POST')
          .then( function(response) {
            $('.detailed_feedback').addClass('hide');
            $('.thank_you').removeClass('hide');
          })
          .catch( function(err) {
            alert('Error capturing feedback');
            console.log(err);
          });
      };
      $('.feedback_btn').on('click', handleFeedbackBtnClick);
    });
  </script>

  <!-- graphiql -->
  <script type="text/javascript">
    $(document).ready( function() {
      // graphql query fetcher
      const graphQLFetcher = function(endpoint) {
        endpoint = endpoint || "{{ GRAPHIQL_DEFAULT_ENDPOINT }}";

        return function(graphQLParams) {
          const params = {
            method: 'post',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(graphQLParams),
            credentials: 'include'
          };

          return fetch(endpoint, params)
            .then(function (response) {
              return response.text();
            })
            .then(function (responseBody) {
              try {
                return JSON.parse(responseBody);
              } catch (error) {
                return responseBody;
              }
            });
        }
      };

      // create GraphiQL components and embed into HTML
      const setupGraphiQL = function() {
        if (typeof(React) === 'undefined' || typeof(ReactDOM) === 'undefined' || typeof(GraphiQL) === 'undefined') {
          return;
        }

        const targets = document.getElementsByClassName('graphiql');

        for (let i = 0; i < targets.length; i++) {
          const target = targets[i];

          const endpoint = target.getElementsByClassName("endpoint")[0].innerHTML.trim();
          const query = target.getElementsByClassName("query")[0].innerHTML.trim();
          const response = target.getElementsByClassName("response")[0].innerHTML.trim();
          const variables = target.getElementsByClassName("variables")[0].innerHTML.trim();

          const graphiQLElement = React.createElement(GraphiQL, {
            fetcher: graphQLFetcher(endpoint),
            schema: null, // TODO: pass undefined if introspection supported
            query: query,
            response: response,
            variables: variables
          });

          ReactDOM.render(graphiQLElement, target);
        }
      };

      const resizeGraphiQLVariableEditors = function() {
        const graphiQLVariableEditors = $('.graphiql .variable-editor');
        for (let i = 0; i < graphiQLVariableEditors.length; i++) {
          graphiQLVariableEditors[i].style.height = '120px';
        }
      };

      // if graphiql elements present, load react/graphiql js files and setup graphiql
      if ($('.graphiql').length > 0) {
        const loadingStatus = {'react': false, 'reactDom': false, 'graphiQL': false};

        const checkLoading = function(loadedFile) {
          return function () {
            loadingStatus[loadedFile] = true;

            // return if all files not yet loaded
            for (var file in loadingStatus) {
              if (!loadingStatus[file]) {
                return;
              }
            }

            setupGraphiQL();

            resizeGraphiQLVariableEditors();
          }
        };

        loadCss("{{ pathto('_static/graphiql/graphiql.css', 1) }}", function(){});
        loadScript("{{ pathto('_static/react/react.min.js', 1) }}", checkLoading('react'));
        loadScript("{{ pathto('_static/react/react-dom.min.js', 1) }}", checkLoading('reactDom'));
        loadScript("{{ pathto('_static/graphiql/graphiql.min.js', 1) }}", checkLoading('graphiQL'));
      }
    });
  </script>

  <!-- global_tabs -->
  <script type="text/javascript">
    $(document).ready( function() {
      if ($('.global-tabs').length > 0) {
        loadCss("{{ pathto('_static/global_tabs/global_tabs.css', 1) }}", function(){});
        loadScript("{{ pathto('_static/global_tabs/global_tabs.js', 1) }}", function(){});
      }
    });
  </script>

  <!-- replace latest release tag -->
  <script type="text/javascript">
    $(document).ready( function() {
      // if latest release tag elements present, replace with latest release tag
      if ($('.latest-release-tag').length > 0) {
        const releaseUrl = 'https://releases.hasura.io/graphql-engine?agent=docs.hasura.io';

        promise_ajax(releaseUrl, null, 'GET')
          .then(function (response) {
            const data = JSON.parse(response);
            const latest_version = data.latest;
            const latest_prerelease_version = data.prerelease;

            const release_targets = document.getElementsByClassName('latest-release-tag');
            for (let i = 0; i < release_targets.length; i++) {
              const release_target = release_targets[i];

              release_target.innerHTML = latest_version;
            }

            const prerelease_targets = document.getElementsByClassName('latest-prerelease-tag');
            for (let i = 0; i < prerelease_targets.length; i++) {
              const prerelease_target = prerelease_targets[i];

              prerelease_target.innerHTML = latest_prerelease_version;
            }
          })
          .catch(function (err) {
            console.log(err);
          });
      }
    });
  </script>

  <!-- open external links in new tab -->
  <script type="text/javascript">
    $(document).ready( function() {
      const externalLinks = $('a.reference.external');
      for (let i = 0; i < externalLinks.length; i++) {
        externalLinks[i].setAttribute('target', '_blank');
      }
    });
  </script>

  {%- block extrafooter %} {% endblock %}
  {% block extrahead %}
    <!--<meta name="viewport" content="user-scalable=no">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
  {% endblock %}

{% endblock %}