mokkenstorm.dev
fork of hey-api/openapi-ts because I need some additional things
1<script setup lang="ts">
2const name = ref('foo');
3const petId = ref(BigInt(8));
4const status =
5 ref<NonNullable<FindPetsByStatusData['query']>['status']>('available');
6
7function incrementPetId() {
8 petId.value++;
9}
10
11async function addNewPet() {
12 name.value = name.value === 'foo' ? 'bar' : 'foo';
13
14 const pet = await addPet({
15 body: {
16 category: {
17 id: BigInt(0),
18 name: 'cats',
19 },
20 id: BigInt(0),
21 name: 'doggy',
22 photoUrls: ['string'],
23 status: 'available',
24 tags: [
25 {
26 id: BigInt(0),
27 name: 'string',
28 },
29 ],
30 },
31 composable: '$fetch',
32 });
33
34 console.log('Added new pet:', pet);
35}
36
37function changeStatus() {
38 status.value = status.value === 'available' ? 'pending' : 'available';
39}
40
41const query = computed(() => ({
42 status: status.value,
43}));
44
45/**
46 * useAsyncData
47 *
48 * During SSR data is fetched only on the server side and transferred to the
49 * client.
50 *
51 * This will NOT forward anything.
52 * Result: { cookies: {} }
53 */
54// const { data } = await useAsyncData(() => getPetById())
55async function submitHandler() {}
56const asyncData = await getPetById({
57 // fetchAdapter: (url, options) => fetch(url, options),
58 // fetchAdapter: (url, options) => $fetch(url, options),
59 // fetchAdapter: (url, options) => axiosInstance[(options.method || 'get').toLowerCase()](url, options),
60 asyncDataOptions: {
61 default: () => ({
62 name: 'Default Pet',
63 photoUrls: [],
64 }),
65 watch: [petId],
66 },
67 composable: 'useAsyncData',
68 key: 'item',
69 path: {
70 petId,
71 },
72});
73watch(asyncData.data, (newPet) => {
74 console.log('pet', newPet);
75});
76
77await findPetsByStatus({
78 asyncDataOptions: {
79 watch: [status],
80 },
81 composable: 'useAsyncData',
82 query,
83});
84
85/**
86 * useAsyncData + useRequestFetch
87 *
88 * This will forward the user's headers to the event handler.
89 * Result: { cookies: { foo: 'bar' } }
90 */
91const requestFetch = useRequestFetch();
92const asyncDataWithRequestFetch = await getPetById({
93 $fetch: requestFetch,
94 composable: 'useAsyncData',
95 path: {
96 petId: BigInt(8),
97 },
98});
99
100/**
101 * useFetch
102 *
103 * You can also useFetch as shortcut of useAsyncData + $fetch.
104 */
105const fetch = await getPetById({
106 composable: 'useFetch',
107 path: {
108 petId: BigInt(8),
109 },
110});
111
112await addPet({
113 asyncDataOptions: {
114 watch: [name],
115 },
116 body: {
117 category: {
118 id: BigInt(0),
119 name: 'Cats',
120 },
121 id: BigInt(0),
122 name,
123 photoUrls: ['string'],
124 status: 'available',
125 tags: [
126 {
127 id: BigInt(0),
128 name: 'pet',
129 },
130 ],
131 },
132 composable: 'useAsyncData',
133 key: 'addPet',
134});
135
136/**
137 * useLazyAsyncData
138 *
139 * Navigation will occur before fetching is complete. Handle 'pending' and
140 * 'error' states directly within your component's template.
141 */
142const lazyAsyncData = await getPetById({
143 composable: 'useLazyAsyncData',
144 key: 'count',
145 path: {
146 petId: BigInt(8),
147 },
148});
149watch(lazyAsyncData.data, (newPet) => {
150 // Because pet might start out null, you won't have access
151 // to its contents immediately, but you can watch it.
152 if (newPet) {
153 console.log(newPet.name);
154 }
155});
156
157/**
158 * useLazyFetch
159 *
160 * Navigation will occur before fetching is complete. Handle 'pending' and
161 * 'error' states directly within your component's template.
162 */
163const lazyFetch = await getPetById({
164 composable: 'useLazyFetch',
165 path: {
166 petId: BigInt(8),
167 },
168});
169watch(lazyFetch.data, (newPet) => {
170 // Because pet might start out null, you won't have access
171 // to its contents immediately, but you can watch it.
172 if (newPet) {
173 console.log(newPet.name);
174 }
175});
176
177async function handleFetch() {
178 try {
179 const result = await getPetById({
180 composable: '$fetch',
181 onRequest: [
182 () => {
183 console.log('onRequest: local');
184 },
185 ],
186 onResponse: [
187 () => {
188 console.log('onResponse: local');
189 },
190 ],
191 path: {
192 petId,
193 },
194 });
195 console.log(result);
196 } catch (error) {
197 console.log(error);
198 }
199}
200</script>
201
202<template>
203 <h1>Get Random Pet Nuxt APIs</h1>
204 <div>
205 <button @click="handleFetch" type="button">$fetch</button>
206 <button @click="incrementPetId" type="button">increment petId</button>
207 <button @click="changeStatus" type="button">change status</button>
208 <button @click="addNewPet" type="button">add pet</button>
209 <div>
210 <p>id: {{ petId }}</p>
211 <p>name: {{ name }}</p>
212 <p>status: {{ status }}</p>
213 </div>
214 </div>
215</template>