danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/devhub-north-2024.
1.7 kB
92 lines
1<template>
2 <main class="container">
3 <h1>
4 hi devhub north
5 </h1>
6 <!-- Form -->
7 {{ error }}
8 <form @submit.prevent="handleSubmit">
9 <input type="text" v-model="prompt">
10 <button :aria-busy="status === 'pending'">
11 Make a request
12 </button>
13 </form>
14 <!-- App -->
15 <MalleableComponent />
16 </main>
17</template>
18
19<script setup lang="ts">
20import '@picocss/pico'
21
22const malleables = reactive({
23 query: `
24 query List {
25 cards {
26 name
27 abilities {
28 effect
29 name
30 type
31 }
32 evolveFrom
33 category
34 rarity
35 energyType
36 attacks {
37 cost
38 damage
39 effect
40 }
41 description
42 }
43 }`,
44 template: `
45<ul>
46 <li v-for="card in data?.data.cards">
47 {{ card.name }}
48 </li>
49</ul>
50`
51})
52
53const prompt = ref('')
54const error = ref()
55const status = ref<'pending' | 'error' | 'idle'>('idle')
56async function handleSubmit () {
57 status.value = 'pending'
58 try {
59 const result = await $fetch('/api/completion', {
60 method: 'POST',
61 body: {
62 prompt: prompt.value,
63 malleables
64 }
65 })
66 Object.assign(malleables, result)
67 console.log(({result}))
68 status.value = 'idle'
69 } catch (e) {
70 error.value = e
71 status.value = 'error'
72 }
73 prompt.value = ''
74}
75
76const MalleableComponent = defineComponent({
77 async setup () {
78 const query = toRef(malleables, 'query')
79
80 const { data } = useFetch('https://api.tcgdex.net/v2/graphql', {
81 method: 'POST',
82 body: { query },
83 })
84
85 return () => h({
86 template: malleables.template,
87 data: () => ({ data: data.value })
88 })
89
90 }
91})
92</script>