Как отменить запрос в 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, то не рендерить. Но будет ли такое решение оптимальное?