My usefetch is super long
When i call my rest api back it takes 6 seconds to enter the "onRequest" in useFetch. But my call on postamn is like 200ms. What to change ?
type UseFetchRequest<T> = Parameters<typeof useFetch<T>>['0']
type UseFetchOptions<T> = Parameters<typeof useFetch<T>>['1']
type UseFetchReturn<T> = ReturnType<typeof useFetch<T>>
export const useMatchingApiFetch = async <T>(
request: UseFetchRequest<T>,
options?: UseFetchOptions<T>
): Promise<UseFetchReturn<T>> => {
return await useFetch<T>(request, { ...options, $fetch: useNuxtApp().$matchingApiFetch })
}
type UseFetchRequest<T> = Parameters<typeof useFetch<T>>['0']
type UseFetchOptions<T> = Parameters<typeof useFetch<T>>['1']
type UseFetchReturn<T> = ReturnType<typeof useFetch<T>>
export const useMatchingApiFetch = async <T>(
request: UseFetchRequest<T>,
options?: UseFetchOptions<T>
): Promise<UseFetchReturn<T>> => {
return await useFetch<T>(request, { ...options, $fetch: useNuxtApp().$matchingApiFetch })
}
<script setup lang="ts">
const { t } = useI18n()
const skills = defineModel<Skill[]>()
const search = ref<string>('')
const page = ref(1)
const limit = ref(20)
const { data, pending } = await useMatchingApiFetch<{ data: Array<{ skill: string; id: string }>; total: number }>('/skill', {
query: {
skill: search,
page,
limit
},
default: () => ({ data: [], total: 0 })
})
const options = computed(() => data.value.data.map(({ skill, id, ...data }) => ({ ...data, label: skill, value: id })))
</script>
<template>
<q-select
v-model="skills"
outlined
multiple
use-input
input-debounce="200"
:options="options"
use-chips
:loading="pending"
:label="`${t('account.form.skills')}`"
@input-value="(newValue) => search = newValue"
/>
</template>
<script setup lang="ts">
const { t } = useI18n()
const skills = defineModel<Skill[]>()
const search = ref<string>('')
const page = ref(1)
const limit = ref(20)
const { data, pending } = await useMatchingApiFetch<{ data: Array<{ skill: string; id: string }>; total: number }>('/skill', {
query: {
skill: search,
page,
limit
},
default: () => ({ data: [], total: 0 })
})
const options = computed(() => data.value.data.map(({ skill, id, ...data }) => ({ ...data, label: skill, value: id })))
</script>
<template>
<q-select
v-model="skills"
outlined
multiple
use-input
input-debounce="200"
:options="options"
use-chips
:loading="pending"
:label="`${t('account.form.skills')}`"
@input-value="(newValue) => search = newValue"
/>
</template>
0 Replies