<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>GraphQL UI — Convert your queries into forms</title>
<meta name="title" content="GraphQL — Convert your queries into forms">
<meta name="description" content="With GraphQL UI you can evade all the hassle of typing out your query manually while testing the API. Just put in your GraphQL API URL, and generate user-friendly forms on the fly.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="GraphQL UI — Convert your queries into forms">
<meta property="og:description" content="With GraphQL UI you can evade all the hassle of typing out your query manually while testing the API. Just put in your GraphQL API URL, and generate user-friendly forms on the fly.">
<meta property="og:image" content="https://i.ibb.co/TgWz2c7/Screenshot-2020-05-23-at-9-56-37-PM-1.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="GraphQL UI — Convert your queries into forms">
<meta property="twitter:description" content="With GraphQL UI you can evade all the hassle of typing out your query manually while testing the API. Just put in your GraphQL API URL, and generate user-friendly forms on the fly.">
<meta property="twitter:image" content="https://i.ibb.co/TgWz2c7/Screenshot-2020-05-23-at-9-56-37-PM-1.jpg">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/graphql.js@0.6.6/graphql.min.js"></script>
<script src="https://unpkg.com/prettier@2.0.5/standalone.js"></script>
<script src="https://unpkg.com/prettier@2.0.5/parser-graphql.js"></script>
<script>{{ index.js }}</script>
<script>{{ renderHelpers.js }}</script>
</head>
<body>
<form action="#" name="config">
<input id="endpoint" type="text" name="endpoint" id="" placeholder="Endpoint" value="http://dev5-2.stg.synup.com/graphql">
<select name="token_type" id="">
<option value="Bearer">Bearer</option>
<option value="Internal">Internal</option>
<option value="API">API</option>
</select>
<input id="token" type="text" name="token" id="" placeholder="Token" value="eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ1c2VyX2lkIjoxNTcsImFjY291bnRfaWQiOjEyOCwicm9sZV9pZCI6MTgzODIsIm5hbWUiOiJMZXp3b24iLCJ1c2VyX3R5cGUiOiJBZ2VuY3kiLCJqdGkiOiJhYmMxNDJmZS02YTdhLTQwZjQtYmE4ZC02YTFhMDE2Nzc0NWMiLCJyb2xlX3R5cGUiOiJhZG1pbiIsInJvbGVfbmFtZSI6IkFkbWluIn0.gospr_-MP9topw-yKIF7niauJcerUhoxxDIxF8SJhUI2J-Cr7YrTQHmECxOB9hQU4s7lXsfzS7iNAa84JbR2lDi33A7yzYpQK1D8GBJgJSs8twsy41t-YVSxqmlJxhOMEobRTZqPJI1lFcf6UHcQppwNtK3_2B_srf70bwFlFgoimQxny1GRMXgtfJLfyrBBU6iFJBAIgOl8KVqfX0qBjs1l3LK9-7pVc7ZsUUq62fkAj8cYkf9t4LZla_wRBhUTQmMy_uGSTT0neqhqISG177EXHk-HzWtXVCrZBGKvFwO3rbtZRbueJopzGUI5K10iPwSQvFR64hzXuJz3WH1lGQ">
<input id="submit_button" type="submit" value="Submit" name="submit_button">
</form>
</body>
<script>
document.forms.config.addEventListener('submit', (e) => {
e.preventDefault()
let submit_button = e.target.submit_button
let endpoint = e.target.endpoint.value
let tokenType = e.target.token_type.value
let token = e.target.token.value
submit_button.setAttribute('disabled', true)
getClient(endpoint,`${tokenType} ${token}`)
.then((client) => {
submit_button.removeAttribute('disabled')
let container = document.getElementById('container')
if(container != null){ container.remove() }
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container)
let queryList = client.getFullList().sort()
let querySelectElement = document.createElement('select')
queryList.forEach((query) => {
let option = document.createElement('option')
option.setAttribute('value', query)
option.innerText = query
querySelectElement.appendChild(option)
})
container.appendChild(querySelectElement)
querySelectElement.addEventListener('change', function(e){
query = e.target.value
let subContainer = document.getElementById('subContainer')
if(subContainer != null){ subContainer.remove() }
subContainer = document.createElement('div')
subContainer.id = 'subContainer'
container.appendChild(subContainer)
let payload = client.resolveQueryInput(query)
let output = parseObject(payload)
htmlRender = renderItems(output)
subContainer.appendChild(htmlRender)
button = document.createElement('button')
button.setAttribute('value', 'Submit')
button.innerText = 'Submit'
subContainer.appendChild(button)
panelHeadings = document.getElementsByClassName('panel')
let addPanelBody = function(e){
if (e.target.nodeName != "A"){
e.preventDefault()
return
}
let typeName = e.target.innerText
let payload = client.resolveType(typeName)
let output = parseObject(payload)
let htmlRender = renderItems(output)
e.target.parentElement.parentElement.nextElementSibling.firstChild.appendChild(htmlRender)
}
for (let item of panelHeadings) {
item.addEventListener('click', addPanelBody)
}
button.addEventListener('click', function(e){
let variables = parseInput(output)
let outputPayload = client.getOutputQuery(query)
let preTags = document.getElementsByTagName("pre")
if(preTags.length > 0){
for (let i=preTags.length; i!= 0;) {
preTags[--i].remove()
}
}
let queryPreTag = document.createElement('pre')
subContainer.appendChild(queryPreTag)
queryPreTag.innerHTML = outputPayload.replace(/\n/g, "<br />")
let variablesPreTag = document.createElement('pre')
subContainer.appendChild(variablesPreTag)
variablesPreTag.innerHTML = JSON.stringify(variables, undefined, 4).replace(/\n/g, "<br />")
body = {
'query': outputPayload,
'variables': variables
}
client.execute(body).then(async (response) => {
response = await response.json();
let responseTag = document.createElement('pre')
responseTag.id = "response"
subContainer.appendChild(responseTag)
responseTag.innerHTML = JSON.stringify(response, undefined, 4)
}).catch(e=> console.log(e))
})
})
})
})
</script>
</html>