graphql-engine/docs/_theme/djangodocs/layout.html
2020-06-12 16:22:22 +05:30

859 lines
34 KiB
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/hasura-con-2020/"
target="_blank"
rel="noreferrer noopener"
>
<div class="bannerStrip">
<div class="displayFlex noPadd">
<div class="announceIcon">
<img src="{{ pathto('_images/layout/hasura-con.svg', 1) }}" alt="Hasura con 2020"/>
</div>
<div class="bodyTextSmall">
Hasura Con: <span class='fontNormal'>Our free online conference on Pushing the boundaries of GraphQL<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/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>
<a class='gitHubBtn hide' href="https://github.com/hasura/graphql-engine/" target="_blank" rel="noopener noreferrer">
<div class='gitHubStars'>
<img src="{{ pathto('_images/layout/github-header.svg', 1) }}" alt='Github'/>
<span>Star</span>
</div>
<div class='gitHubCount'>
</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 class="full-width">
<div class="input-box">
<input type="email" name="EMAIL" id="mce-EMAIL" aria-label="Email" placeholder="Your Email Address" pattern="^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$" title="The domain portion of the email address is invalid (the portion after the @)." required>
</div>
<div id="mce-responses" class="clear display-inline">
<div class="mce-error-response response error-message hide">
</div>
<div class="mce-success-response response success-message hide">
</div>
</div>
</div>
<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" disabled="true" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</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 = 'hasuraConBannerDismissed';
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/mailchimp.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>
<script type="text/javascript">
$(document).ready( function() {
var baseDomain = "{{ BASE_DOMAIN }}";
const dbUrl = baseDomain ? 'https://data.' + baseDomain + '/v1/query' : 'https://data.hasura-stg.hasura-app.io/v1/query';
const githubStarCount = () => {
const bodyObj = {
type: "select",
args: {
table: "github_repos",
columns: ["star_count"],
where: {
$or: [
{
name: "graphql-engine",
},
],
},
},
}
const options = {
method: "POST",
credentials: "include",
body: JSON.stringify(bodyObj),
headers: {
"Content-Type": "application/json",
},
}
fetch(dbUrl, options)
.then(response => {
return response.json()
})
.then(data => {
const githubStar = data[0].star_count
$(".gitHubCount").html(githubStar);
$(".gitHubBtn").removeClass("hide");
})
.catch(e => {
console.error(e)
})
}
githubStarCount();
});
</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 %}