<script>
import Card from './Card.vue';

import query from '../gql/anime';
import { useQuery } from "@vue/apollo-composable";
import { watch } from 'vue';



export default {
  data() {
    return {
      id: 1,
      title: null,
      description: null,
      url: null
    }
  },
  methods: {
    async fetchAnime() {
      const variables = {
        id: 15125
      }

      this.url = null;
      const { result } = useQuery(query, variables);

      watch(result, value => {
        this.url = value.Media.coverImage.large;
        this.title = value.Media.title.english;
        this.description = value.Media.description;
      });
    }
  },
  mounted() {
    this.fetchAnime();
  },
  components: {
    Card,
  }
}

</script>

<template>
<div>
  <Card :title="title" :description="description" :url="url" />
</div>
</template>