I have some prefetch queries like this on the initial route

const TestRun = async () => {
    await queryClient.prefetchQuery({
        queryKey: ['test'],
        queryFn: fetchTest,
        staleTime: 5 * 60 * 1000,
    });

    const testData = queryClient.getQueryData(['test']);

    if (testData) {
        await queryClient.prefetchQuery({
 
            queryKey: ['test1'],
            queryFn: () => fetchTest1(testData),
            staleTime: 5 * 60 * 1000,
            gcTime: 30 * 10000,
        });

        queryClient.prefetchQuery({
            queryKey: ['test2'],
            queryFn: () => fetchTest2(testData),
            staleTime: 5 * 60 * 1000,
            gcTime: 30 * 10000,
        });
    }
};

On another route, I am calling this custom hook

export default function useTestData(props: any) {
    const { prop1, prop2 } = props;
    async function fetchTest() {
        const { data } = await axios.get('test);
        return data;
    }

    const { status, data, isFetching, isLoading } = useQuery({
        queryKey: ['test1', prop1, prop2],
        queryFn: () => fetchTest(),
        staleTime: 30 * 1000, // 30 second
        placeholderData: keepPreviousData,
        enabled: !!prop2,
    });

    return {
        isLoading,
        status,
        isFetching,
        data,
    };
}

It should continue the prefetch call, but it is making a double call. When I remove the queryKey dependencies on prop1 and prop2, it works without the double call. How can I resolve this?

I tried to add a wait for the initial call or adjust the enabled key, but it didn’t work