Refecth using cache instead execute queryFn

import axios from 'axios';
import { AjaxResponse, AvailableSelect } from '@/types';
import { ajaxAvailableSelect } from '@/configurationType';
import { useQuery } from '@tanstack/vue-query'
import { Ref, watch } from 'vue';

export const useGetAvailableSelectList = (id_available_select_type: Ref<string>) => {

    const queryFn = (): Promise<Array<Partial<AvailableSelect>>> => {
        return new Promise((resolve, reject) => {
            console.log('fetching')
            if (!id_available_select_type.value) return resolve([])

            return axios.get<AjaxResponse<Array<AvailableSelect>>>(ajaxAvailableSelect, {
                params: {
                    id_available_select_type: id_available_select_type.value
                }
            })
                .then((response) => {
                    if (response.data.success) {
                        resolve(response.data.data)
                    } else {
                        reject('Error')
                    }
                })
                .catch(reject)
        })
    };

    const { data, refetch } = useQuery(
        ['availableSelect', id_available_select_type.value], {
        queryFn,
        refetchOnReconnect: false,
        refetchOnWindowFocus: false,
        staleTime: Infinity,
        enabled: false,
        initialData: []
    });

    watch(
        () => id_available_select_type.value, // detect id is changed to request new data if is not in cache
        (newId) => {
            console.log('detectedNewId', newId)
            refetch() // request data
        })


    return data;
};

import axios from 'axios';
import { AjaxResponse, AvailableSelect } from '@/types';
import { ajaxAvailableSelect } from '@/configurationType';
import { useQuery } from '@tanstack/vue-query'
import { Ref, watch } from 'vue';

export const useGetAvailableSelectList = (id_available_select_type: Ref<string>) => {

    const queryFn = (): Promise<Array<Partial<AvailableSelect>>> => {
        return new Promise((resolve, reject) => {
            console.log('fetching')
            if (!id_available_select_type.value) return resolve([])

            return axios.get<AjaxResponse<Array<AvailableSelect>>>(ajaxAvailableSelect, {
                params: {
                    id_available_select_type: id_available_select_type.value
                }
            })
                .then((response) => {
                    if (response.data.success) {
                        resolve(response.data.data)
                    } else {
                        reject('Error')
                    }
                })
                .catch(reject)
        })
    };

    const { data, refetch } = useQuery(
        ['availableSelect', id_available_select_type.value], {
        queryFn,
        refetchOnReconnect: false,
        refetchOnWindowFocus: false,
        staleTime: Infinity,
        enabled: false,
        initialData: []
    });

    watch(
        () => id_available_select_type.value, // detect id is changed to request new data if is not in cache
        (newId) => {
            console.log('detectedNewId', newId)
            refetch() // request data
        })


    return data;
};