Matthias Posts - Answer Overflow

Matthias

•Created by Matthias on 7/28/2024 in #❓・help

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>

1 replies

NNuxt

•Created by Matthias on 5/1/2024 in #❓・help

plugins and runtimeconfig

i want to use this : https://github.com/razorcx-courses/nuxt3-firebase-auth but by replacing nuxt3 by nuxt, envs are not get. Please help fix firebas.client.ts

1 replies

Gaming

Programming