Skip to content

Instantly share code, notes, and snippets.

@dan-mckay
Created October 29, 2019 11:58
Show Gist options
  • Save dan-mckay/9a0bbe93986626fd746ec05cba51ec42 to your computer and use it in GitHub Desktop.
Save dan-mckay/9a0bbe93986626fd746ec05cba51ec42 to your computer and use it in GitHub Desktop.
Simple client for writing to a `user` table with Hasura
<html lang="en">
<head>
<meta charset="utf-8">
<title>fetch hasura</title>
</head>
<body>
<form id="create_user_form">
Enter id: <input type="text" name="user_id" id="user_id">
Enter name: <input type="text" name="user_name" id="user_name">
Enter email: <input type="email" name="user_email" id="user_email">
<button id="btn" type="button">submit</button>
</form>
<div id="response"></div>
<script>
const btn = document.getElementById('btn')
btn.addEventListener('click', createUser)
function createUser() {
const uid = document.getElementById('user_id').value
const name = document.getElementById('user_name').value
const email = document.getElementById('user_email').value
const response = document.getElementById('response')
fetch('http://localhost:8080/v1/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
query: `mutation {
insert_user(objects: {email: "${email}", id: ${uid}, name: "${name}"}) {
returning {
email
name
}
}
}`
}),
})
.then(res => res.json())
.then(res => {
const info = res.data.insert_user.returning[0] || res.error
response.innerHTML = JSON.stringify(info)
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment