mfaridzia/anime-graphql-js.html

## anime-graphql-js.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Anime</title>
</head>
<body>

  <div id="anime">
    <p class="name"> dsds </p>
  </div>


<script>

  let name =  document.querySelector(".name");

  // Definisikan graphq query nya, query disini maksudnya adalah untuk meminta data ke graphql servernya
  const query = `
    query ($id: Int) {
      Media (id: $id, type: ANIME) {
        id
        title {
          romaji
          english
          native
        }
      }
    }
  `;

  // Definisikan query variables dan nilainya yang akan digunakan pada request query ke server nya
  const variables = {
      id: 15125
  };

  // Mendefinisikan config untuk api request nya
  const url = 'https://graphql.anilist.co',
      options = {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json',
          },
          body: JSON.stringify({
              query: query,
              variables: variables
          })
      };

  // Menggunakan fetch untuk membuat request ke graphql servernya
  fetch(url, options).then(handleResponse)
                     .then(handleData)
                     .catch(handleError);

  function handleResponse(response) {
      return response.json().then(function (json) {
          return response.ok ? json : Promise.reject(json);
      });
  }

  function handleData(data) {
      name.innerHTML = data.data.Media.title.native;
  }

  function handleError(error) {
      console.error(error);
  }

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Anime</title>
	</head>
	<body>

	<div id="anime">
	<p class="name"> dsds </p>
	</div>


	<script>

	let name = document.querySelector(".name");

	// Definisikan graphq query nya, query disini maksudnya adalah untuk meminta data ke graphql servernya
	const query = `
	query ($id: Int) {
	Media (id: $id, type: ANIME) {
	id
	title {
	romaji
	english
	native
	}
	}
	}
	`;

	// Definisikan query variables dan nilainya yang akan digunakan pada request query ke server nya
	const variables = {
	id: 15125
	};

	// Mendefinisikan config untuk api request nya
	const url = 'https://graphql.anilist.co',
	options = {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	'Accept': 'application/json',
	},
	body: JSON.stringify({
	query: query,
	variables: variables
	})
	};

	// Menggunakan fetch untuk membuat request ke graphql servernya
	fetch(url, options).then(handleResponse)
	.then(handleData)
	.catch(handleError);

	function handleResponse(response) {
	return response.json().then(function (json) {
	return response.ok ? json : Promise.reject(json);
	});
	}

	function handleData(data) {
	name.innerHTML = data.data.Media.title.native;
	}

	function handleError(error) {
	console.error(error);
	}

	</script>
	</body>
	</html>