mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 17:31:56 +03:00
675 lines
24 KiB
HTML
675 lines
24 KiB
HTML
{% extends "basic/layout.html" %}
|
|
|
|
{% set css_files = css_files + ['_static/hasura-custom.css', '_static/djangosite.css'] %}
|
|
|
|
{%- macro secondnav() %}
|
|
{%- if prev %}
|
|
« <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> »
|
|
{%- endif %}
|
|
{%- endmacro %}
|
|
|
|
{% 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">
|
|
{% endblock %}
|
|
|
|
{% block document %}
|
|
<div id="custom-doc" class="{% block bodyclass %}{{ 'yui-t6' if pagename != 'index' else '' }}{% endblock %}">
|
|
<div class="main_container_wrapper">
|
|
{% include 'pages/loading.html' %}
|
|
<div id="" class="content_wrapper">
|
|
{%- if pagename == 'index' %}
|
|
{% include 'pages/landing.html' %}
|
|
{%- else %}
|
|
{% set rootpage = 'common' %}
|
|
{% set pagenameSplit = pagename.split('/') %}
|
|
{% block sidebarwrapper %}
|
|
<div class="yui-b mobile-hide" id="sidebar">
|
|
{%- if last_updated %}
|
|
<span><b>Last updated:</b> {{ last_updated }}</span>
|
|
{%- endif %}
|
|
{{ sidebar() }}
|
|
</div>
|
|
{% endblock %}
|
|
<div class="content_inner_wrapper">
|
|
<div role="main" parent={{ rootpage }}>
|
|
<div id="docs-content">
|
|
<!-- div class="media_wrapper details_media">
|
|
<div class="float_right wd_100">
|
|
<div class="share_wrapper">
|
|
<button class="share_btn green_btn">
|
|
<span>Share</span>
|
|
<i class="fa fa-share" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div -->
|
|
<div class="mobile-logo mobile-only">
|
|
<a href="https://{{ BASE_DOMAIN }}/" target="_blank">
|
|
<div class="img_wrapper inline-block">
|
|
<img class="responsive logo_img no-shadow" src="{{ pathto('_images/layout/logo-dark.svg', 1) }}" />
|
|
</div>
|
|
</a>
|
|
<a href="https://docs.{{ BASE_DOMAIN }}" class="docs_label mobile-logo-docs">DOCS v{{version}}</a>
|
|
</div>
|
|
<div class="search_head_wrapper">
|
|
<div class="inline-block mobile-only" id="nav_tree_icon">
|
|
<span class="fa fa-bars"></span>
|
|
</div>
|
|
<div class="inline-block input_search_box">
|
|
<span class="fa fa-search search_icon"></span>
|
|
<input type="text" class="search_element" placeholder="Search docs..." />
|
|
</div>
|
|
<div class="header_links inline-block">
|
|
<div class="social_icons_wrapper">
|
|
<div class="social_icons">
|
|
<iframe src="https://ghbtns.com/github-btn.html?user=hasura&repo=graphql-engine&type=star&count=true" frameBorder="0" scrolling="0" width="95px" height="25px"></iframe>
|
|
</div>
|
|
<div class="social_icons">
|
|
<a href="https://twitter.com/hasurahq/" target="_blank">
|
|
<img class="responsive" src="{{ pathto('_images/layout/Twitter.svg', 1) }}" />
|
|
</a>
|
|
</div>
|
|
<div class="social_icons tooltip">
|
|
<a href="https://discord.gg/vBPpJkS" target="_blank">
|
|
<img class="responsive" src="{{ pathto('_images/layout/Discord.svg', 1) }}" />
|
|
</a>
|
|
<span class="tooltiptext">Get instant support on our discord server</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- no need support button
|
|
<div class="buttons">
|
|
<div class="inline-block"> -->
|
|
<!-- a target="_blank" href="https://dashboard.{{ BASE_DOMAIN }}/login" -->
|
|
<!-- no need support button <button class="indiv_btns black supportBtn"> Support </button> -->
|
|
<!--/ a -->
|
|
<!-- no need support button
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<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_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-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="footer-hasura-custom">
|
|
Want to contribute or report missing content? Check out the <a target="_blank" href="https://github.com/hasura/graphql-engine/tree/master/docs">github repo for docs</a>.<br>
|
|
Powered by <a target="_blank" href="http://www.sphinx-doc.org">Sphinx</a>.
|
|
Copyright © 2018 <a target="_blank" href="https://hasura.io">Hasura</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
{%- endif %}
|
|
</div>
|
|
</div>
|
|
<div class="search_wrapper_template hide">
|
|
<div class="search_box_head">
|
|
<h3 class="head_wrapper search_heading">
|
|
<div class="inline-block">
|
|
<%= totalResults %> result<%= totalResults > 1 ? 's' : '' %> for <span class="search_query">'<%= _.escape(searchString) %>'</span>
|
|
</div>
|
|
<div class="algolia_search_attribution">
|
|
<span>
|
|
powered by
|
|
</span>
|
|
<span>
|
|
<img class="algolia_image" src="{{ pathto('_images/layout/algolia-logo.svg', 1) }}" alt="Algolia Hasura Search" />
|
|
</span>
|
|
</div>
|
|
</h3>
|
|
</div>
|
|
<%
|
|
if ( objs.length > 0 ) {
|
|
%>
|
|
<ul>
|
|
<%
|
|
_.each(objs, function(obj, index ) {
|
|
%>
|
|
<li class="search_bullets">
|
|
<a class="search_results_anchor" href="{{ pathto('', 1) }}<%= obj.url %>">
|
|
<div class="no_of_results">
|
|
<%= obj.title %>
|
|
</div>
|
|
</a>
|
|
<div class="search_results_description">
|
|
<%= obj.description.length > 200 ? obj.description.slice(0, 200 ) + ' ...' : obj.description %>
|
|
</div>
|
|
</li>
|
|
</a>
|
|
<%
|
|
});
|
|
%>
|
|
</ul>
|
|
<%
|
|
} else {
|
|
%>
|
|
<div class="no_results"> Sorry! we cannot find what you are searching for! </div>
|
|
<%
|
|
}
|
|
%>
|
|
<div class = "pagination_container wd_100" id = "pagination_container"></div>
|
|
<div style="clear: both;"></div>
|
|
</div>
|
|
<div class="search_wrapper main_wrapper hide">
|
|
<div class="wd_80">
|
|
<div class="search_head_wrapper">
|
|
<div class="inline-block input_search_box">
|
|
<span class="fa fa-search search_icon"></span>
|
|
<input type="text" class="search_element" placeholder="Search docs..." />
|
|
</div>
|
|
<div class="header_links inline-block">
|
|
<div class="buttons">
|
|
<div class="inline-block">
|
|
<!-- a target="_blank" href="https://dashboard.{{ BASE_DOMAIN }}/login" -->
|
|
<button class="indiv_btns black supportBtn"> Support </button>
|
|
<!--/ a -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<div class="search_wrapper_content"></div>
|
|
</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 %}
|
|
|
|
<!-- GA -->
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-59768903-1', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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 ) {
|
|
// If ga is available
|
|
if ( ga ) {
|
|
ga('send', {
|
|
hitType: 'event',
|
|
eventCategory: category,
|
|
eventAction: action,
|
|
eventLabel: label,
|
|
eventValue: value
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<!-- support button -->
|
|
<script type="text/javascript">
|
|
$(document).ready( function() {
|
|
const supportbtnHandler = function() {
|
|
if ( window.Intercom ) {
|
|
window.Intercom('show');
|
|
}
|
|
};
|
|
$('.supportBtn').on('click', supportbtnHandler);
|
|
});
|
|
</script>
|
|
|
|
<!-- search -->
|
|
<script type="text/javascript">
|
|
$(document).ready( function() {
|
|
var lastSearched = "";
|
|
|
|
const showContent = function() {
|
|
$('.content_wrapper').removeClass('hide');
|
|
$('.search_wrapper').addClass('hide');
|
|
};
|
|
|
|
const showSearchResults = function() {
|
|
$('.content_wrapper').addClass('hide');
|
|
$('.search_wrapper').removeClass('hide');
|
|
};
|
|
|
|
const searchFunc = function( query, callback, page, restrictAttributes, attributesToRetrieve ) {
|
|
var ALGOLIA_APPLICATION_ID = "{{ ALGOLIA_APPLICATION_ID }}";
|
|
var ALGOLIA_SEARCH_KEY = "{{ ALGOLIA_SEARCH_KEY }}";
|
|
|
|
var hitsPerPage = 100;
|
|
var page_no = parseInt(page) - 1;
|
|
var offset = (hitsPerPage * (page - 1));
|
|
|
|
var indexName = "{{ ALGOLIA_INDEX_NAME }}";
|
|
|
|
//var client = algoliasearch(APPLICATION_ID, SEARCH_ONLY_KEY);
|
|
var client = algoliasearch(ALGOLIA_APPLICATION_ID, ALGOLIA_SEARCH_KEY, {"protocol":"https:"}); // localhost
|
|
var index = client.initIndex(indexName);
|
|
|
|
var queries = {
|
|
query: query,
|
|
hitsPerPage: hitsPerPage,
|
|
page: page_no,
|
|
offset: offset,
|
|
restrictSearchableAttributes : restrictAttributes
|
|
};
|
|
|
|
if ( attributesToRetrieve ) {
|
|
queries["attributesToRetrieve"] = attributesToRetrieve;
|
|
}
|
|
|
|
index.search(queries, callback );
|
|
};
|
|
|
|
const search = function(searchTerm) {
|
|
function callback(err, content ) {
|
|
const searchHtmlTemplate = $('.search_wrapper_template').html();
|
|
const template = _.template(_.unescape(searchHtmlTemplate));
|
|
const templated_html = template({
|
|
"objs": content.hits,
|
|
"searchString": content.query,
|
|
"totalResults": content.nbHits
|
|
});
|
|
|
|
$(".search_wrapper_content").html(templated_html);
|
|
|
|
hideLoading();
|
|
showSearchResults();
|
|
|
|
trackga('docs', 'search', content.query, content.nbHits);
|
|
}
|
|
|
|
|
|
showLoading();
|
|
|
|
searchFunc(searchTerm, callback, 1, [], ['url', 'description', 'title', 'image', 'tags']);
|
|
};
|
|
|
|
const handleQueryParams = function() {
|
|
const re = /query=(.*)$/;
|
|
const match = re.exec(window.location.search);
|
|
|
|
var searchTerm = '';
|
|
if ( match ) {
|
|
searchTerm = decodeURIComponent(match[1]);
|
|
|
|
if (searchTerm) {
|
|
search(searchTerm);
|
|
} else {
|
|
showContent();
|
|
}
|
|
} else {
|
|
showContent();
|
|
}
|
|
|
|
$('.search_element').val(searchTerm);
|
|
lastSearched = searchTerm;
|
|
};
|
|
|
|
const doSearch = function(value) {
|
|
if (lastSearched !== value) {
|
|
window.history.pushState({"url": (window.location.pathname + '?query=' + value + '')}, 'Search Page', '?query=' + value + '');
|
|
handleQueryParams();
|
|
}
|
|
};
|
|
|
|
const inputSearchHandler = function(e) {
|
|
// Execute on enter only
|
|
if (e.keyCode === 13) {
|
|
doSearch(e.target.value)
|
|
}
|
|
};
|
|
$('.search_element').on('keyup', inputSearchHandler);
|
|
|
|
const iconSearchHandler = function(e) {
|
|
doSearch(e.target.nextSibling.nextSibling.value)
|
|
};
|
|
$('.fa-search').on('click', iconSearchHandler);
|
|
|
|
// handle state
|
|
window.onpopstate = function() {
|
|
handleQueryParams();
|
|
};
|
|
|
|
if (window.location.search.length > 0) {
|
|
handleQueryParams();
|
|
}
|
|
});
|
|
</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);
|
|
});
|
|
</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 graphiQLElement = React.createElement(GraphiQL, {
|
|
fetcher: graphQLFetcher(endpoint),
|
|
schema: null, // TODO: pass undefined if introspection supported
|
|
query: query,
|
|
response: response
|
|
});
|
|
|
|
ReactDOM.render(graphiQLElement, target);
|
|
}
|
|
};
|
|
|
|
// 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();
|
|
}
|
|
};
|
|
|
|
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 targets = document.getElementsByClassName('latest-release-tag');
|
|
for (let i = 0; i < targets.length; i++) {
|
|
const target = targets[i];
|
|
|
|
target.innerHTML = latest_version;
|
|
}
|
|
})
|
|
.catch(function (err) {
|
|
console.log(err);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|