Fetch teekyuu with graphql request

package.json

@@ -13,7 +13,11 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
-    "vue": "^3.2.33"
+    "@vue/apollo-composable": "^4.0.0-alpha.17",
+    "apollo-boost": "^0.4.9",
+    "graphql": "^15.8.0",
+    "vue": "^3.2.33",
+    "vue-apollo": "^3.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.1",

src/components/Card.vue

@@ -1,6 +1,7 @@
 <script setup>
 
 const props = defineProps({
+  url: String,
   title: String,
   description: String
 })
@@ -9,10 +10,10 @@ const props = defineProps({
 
 
 <template>
-  <div class="rounded-xl overflow-hidden bg-white mx-auto max-w-md shadow-xl md:max-w-2">
+  <div class="rounded-xl overflow-hidden bg-white mx-auto max-w-md shadow-md hover:shadow-xl transition-shadow md:max-w-2">
     <div class="md:flex">
       <div class="md:shrink-0">
-        <img class="h-48 w-full object-cover md:h-full md:w-48" src="../assets/paripi-koumei.png">
+        <img class="h-48 w-full object-cover md:h-full md:w-48" :src="url">
       </div>
       <div class="p-8">
         <a class="block mt-1 text-lg leading-tight font-medium text-black hover:underline tracking-wide">

src/components/Content.vue

@@ -1,8 +1,49 @@
-<script setup>
+<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>
-  <Card title="My Product" description="My description" />
+<div>
+  <Card :title="title" :description="description" :url="url" />
+</div>
 </template>

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>

src/gql/anime.js

@@ -0,0 +1,18 @@
+import { gql } from "apollo-boost";
+
+export default gql`
+query ($id: Int) { # Define which variables will be used in the query (id)
+  Media (id: $id, type: ANIME) { # Insert our variables into the query arguments (id) (type: ANIME is hard-coded in the query)
+    id
+    title {
+      romaji
+      english
+      native
+    }
+    description (asHtml: false)
+    coverImage {
+        large
+    }
+  }
+}
+`;

src/main.js

@@ -14,10 +14,26 @@ library.add(faFire);
 library.add(faPlus);
 library.add(faPoo);
 
-import { createApp } from 'vue'
+import ApolloClient from "apollo-boost";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+
+const apolloClient = new ApolloClient({
+  uri: `https://graphql.anilist.co/`,
+});
+
+import { createApp, provide, h } from 'vue'
 import App from './App.vue'
 import './index.css'
+import { provideApolloClient } from "@vue/apollo-composable";
 
-createApp(App)
+provideApolloClient(apolloClient)
+
+createApp({ 
+  setup () {
+    provide(DefaultApolloClient, apolloClient)
+  },
+
+  render: () => h(App),
+})
   .component("font-awesome-icon", FontAwesomeIcon)
   .mount('#app');