mokkenstorm.dev
fork of hey-api/openapi-ts because I need some additional things
chore(pinia-colada): refactoring example
+73
-78
+73
-78
examples/openapi-ts-pinia-colada/src/views/PiniaColadaExample.vue
+73
-78
examples/openapi-ts-pinia-colada/src/views/PiniaColadaExample.vue
···
1
1
<script lang="ts" setup>
2
2
import type { Pet } from '@/client'
3
+
import type { RequestOptions } from '@/client/client'
4
+
import { PiniaColadaDevtools } from '@pinia/colada-devtools'
3
5
import { createClient } from '@/client/client'
4
6
import { PetSchema } from '@/client/schemas.gen'
5
-
import { addPetMutation, getPetByIdQuery, updatePetMutation } from '@/client/@pinia/colada.gen'
6
-
import { useQuery, useMutation } from '@pinia/colada'
7
+
import {
8
+
addPetMutation,
9
+
getPetByIdQuery,
10
+
getPetByIdQueryKey,
11
+
updatePetMutation
12
+
} from '@/client/@pinia/colada.gen'
13
+
import { useQuery, useMutation, useQueryCache } from '@pinia/colada'
7
14
import { ref, watch } from 'vue'
8
-
import type { RequestOptions } from '@/client/client'
9
15
10
16
const localClient = createClient({
11
17
// set default base url for requests made by this client
···
30
36
return request
31
37
})
32
38
33
-
const pet = ref<Pet>()
34
-
const petId = ref<number>()
39
+
const isPetNameRequired = PetSchema.required.includes('name')
35
40
41
+
const petId = ref<number | undefined>()
36
42
const petInput = ref({ name: '', category: '' })
37
43
38
-
const addPet = useMutation(addPetMutation())
44
+
const { data: pet, error } = useQuery(() => ({
45
+
...getPetByIdQuery(petQueryOptions()),
46
+
enabled: petId.value !== undefined
47
+
}))
48
+
const { mutateAsync: createPet } = useMutation(addPetMutation())
49
+
const { mutateAsync: updatePet } = useMutation(updatePetMutation())
39
50
40
-
const updatePet = useMutation(updatePetMutation())
51
+
const queryCache = useQueryCache()
52
+
async function invalidateCurrentPet() {
53
+
const key = getPetByIdQueryKey(petQueryOptions())
54
+
await queryCache.invalidateQueries({ key, exact: true })
55
+
}
41
56
42
-
const { data, error } = useQuery(() => {
43
-
if (!petId.value) {
44
-
return {
45
-
key: ['getPetById', 'none'],
46
-
query: async () => undefined,
47
-
enabled: false
48
-
}
57
+
async function updatePetIdAndInvalidate(newId: number | undefined) {
58
+
if (newId !== undefined) {
59
+
petId.value = newId
49
60
}
50
61
51
-
return {
52
-
...getPetByIdQuery({
53
-
client: localClient,
54
-
path: {
55
-
petId: petId.value
56
-
}
57
-
}),
58
-
enabled: true
62
+
if (petId.value !== undefined) {
63
+
await invalidateCurrentPet()
59
64
}
60
-
})
65
+
}
61
66
62
-
const handleAddPet = async () => {
63
-
if (PetSchema.required.includes('name') && !petInput.value?.name?.length) {
64
-
return
65
-
}
67
+
async function handleAddPet() {
68
+
if (isPetNameRequired && !petInput.value.name) return
66
69
67
-
const result = await addPet.mutateAsync({
68
-
body: {
69
-
category: {
70
-
id: 0,
71
-
name: petInput.value.category
72
-
},
73
-
id: 0,
74
-
name: petInput.value?.name,
75
-
photoUrls: ['string'],
76
-
status: 'available',
77
-
tags: [
78
-
{
79
-
id: 0,
80
-
name: 'string'
81
-
}
82
-
]
70
+
const result = await createPet({ body: buildPetBody() })
71
+
if (!result) return
72
+
73
+
await updatePetIdAndInvalidate(result.id)
74
+
}
75
+
76
+
async function handleUpdatePet() {
77
+
if (!pet.value) return
78
+
79
+
const result = await updatePet({
80
+
body: buildPetBody(pet.value),
81
+
headers: {
82
+
Authorization: 'Bearer <token_from_method>'
83
83
}
84
84
})
85
+
if (!result) return
85
86
86
-
if (result) {
87
-
pet.value = result
88
-
petId.value = result.id ?? petId.value
87
+
await updatePetIdAndInvalidate(result.id)
88
+
}
89
+
90
+
function petQueryOptions() {
91
+
return {
92
+
client: localClient,
93
+
path: { petId: petId.value as number }
89
94
}
90
95
}
91
96
97
+
function randomInt(min: number, max: number) {
98
+
return Math.floor(Math.random() * (max - min + 1) + min)
99
+
}
100
+
92
101
function setRandomPetId() {
93
-
// random id 1-10
94
-
petId.value = Math.floor(Math.random() * (10 - 1 + 1) + 1)
102
+
petId.value = randomInt(1, 10)
95
103
}
96
104
97
-
const handleUpdatePet = async () => {
98
-
const result = await updatePet.mutateAsync({
99
-
body: {
100
-
category: {
101
-
id: pet.value?.category?.id ?? 0,
102
-
name: petInput.value.category
103
-
},
104
-
id: pet.value?.id ?? 0,
105
-
name: petInput.value.name,
106
-
photoUrls: ['string'],
107
-
status: 'available',
108
-
tags: [
109
-
{
110
-
id: 0,
111
-
name: 'string'
112
-
}
113
-
]
105
+
function buildPetBody(base?: Partial<Pet>) {
106
+
return {
107
+
category: {
108
+
id: base?.category?.id ?? 0,
109
+
name: petInput.value.category
114
110
},
115
-
// setting headers per request
116
-
headers: {
117
-
Authorization: 'Bearer <token_from_method>'
118
-
}
119
-
})
120
-
121
-
if (result) {
122
-
pet.value = result
123
-
petId.value = result.id ?? petId.value
111
+
id: base?.id ?? 0,
112
+
name: petInput.value.name,
113
+
photoUrls: ['string'],
114
+
status: 'available' as const,
115
+
tags: [
116
+
{
117
+
id: 0,
118
+
name: 'string'
119
+
}
120
+
]
124
121
}
125
122
}
126
-
127
-
watch(data, () => {
128
-
pet.value = data.value as Pet | undefined
129
-
})
130
123
131
124
watch(error, (error) => {
132
125
console.log(error)
···
218
211
</form>
219
212
</div>
220
213
</div>
214
+
215
+
<pinia-colada-devtools />
221
216
</template>