dan-mckay/index.html

## index.html
<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>
	<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>