Как отменить запрос в Tanstack query при debounce функции в nuxt js?

При enable false у меня сайт зависает и появляется бесконечная загрузка сайта. До этого, когда использовал watchDebounce, то код при enable: false работал, но кеширование данных в ssr не работало. При помощи refDebounced кеширование начало работать, но enable: falee перестал работать и сайт завис. Подскажите пожалуйста. Нужно, когда search || debounced пустая строка, то отменять запрос, чтобы все данные не приходили с сервера. Как исправить баг?

<script setup>
import { refDebounced } from "@vueuse/core";
import { useQuery } from "@tanstack/vue-query";
import axios from "axios";

const search = ref('');

const debounced = refDebounced(search, 500);

const fetcher = async (value) => {
    const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${value}`);

    return data;
}

const enabled = computed(() => {
    return !!debounced.value
})

const {
    data,
    isSuccess,
    isError,
    isLoading,
    suspense,
} = useQuery({
    queryKey: ['todos', debounced],
    queryFn: ({ queryKey }) => {
        return fetcher(queryKey[1])
    },
    cacheTime: 1000 * 60 * 60,
    staleTime: 1000 * 60 * 60,
    // enabled,
})

onServerPrefetch(async () => {
    await suspense()
})
</script>

есть вот такой вариант:

<script setup>
import { refDebounced } from "@vueuse/core";
import { useQuery } from "@tanstack/vue-query";
import axios from "axios";

const search = ref('');

const debounced = refDebounced(search, 500);

const fetcher = async (value) => {
    const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${value}`);

    return data;
}

const {
    data,
    isSuccess,
    isError,
    isLoading,
    suspense,
} = useQuery({
    queryKey: ['todos', debounced],
    queryFn: ({ queryKey }) => {
        if(!queryKey[1]) return false
        return fetcher(queryKey[1])
    },
    cacheTime: 1000 * 60 * 60,
    staleTime: 1000 * 60 * 60,
})

onServerPrefetch(async () => {
    await suspense()
})
</script>

Если ответ bool false, то не рендерить. Но будет ли такое решение оптимальное?


Ответы (0 шт):