Fetch teekyuu with graphql request

src/components/FetchButton.vue

@@ -0,0 +1,26 @@
+<script setup>
+import query from '../gql/anime';
+import { useQuery } from "@vue/apollo-composable";
+import { watch } from 'vue';
+
+const variables = {
+    id: 15125
+}
+
+function FetchParipiKoumei() {
+    const { result, loading, error } = useQuery(query, variables);
+    return result.value;
+}
+
+function onClick() {
+    const result = FetchParipiKoumei();
+    watch(result, value => {
+        console.log(value);
+    })
+}
+
+</script>
+
+<template>
+    <button class="shadow-md p-2 rounded-full bg-blue-500 text-white  hover:shadow-blue-500 shadow-blue-200 transition-shadow" @click="onClick">Fetch</button>
+</template>