<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>