query
query copied to clipboard
[Vue-query ] TypeError: client.defaultQueryOptions is not a function in v5
Describe the bug
I am using Vue @tanstack/vue-query
I have latest packages:
"@tanstack/vue-query": "^5.59.13",
"@tanstack/vue-query-devtools": "^5.59.13",
i get this error:
Uncaught (in promise) TypeError: client.defaultQueryOptions is not a function
at ComputedRefImpl.fn (chunk-XV6XIJVG.js?v=897b9526:3988:30)
at refreshComputed (chunk-TF6X5W6F.js?v=897b9526:634:29)
at get value (chunk-TF6X5W6F.js?v=897b9526:1825:5)
at useBaseQuery (chunk-XV6XIJVG.js?v=897b9526:3992:58)
at useQuery (chunk-XV6XIJVG.js?v=897b9526:4082:10)
at useUpload (user.ts:8:10)
at setup (UserDetails.vue:56:26)
at callWithErrorHandling (chunk-TF6X5W6F.js?v=897b9526:2260:19)
at setupStatefulComponent (chunk-TF6X5W6F.js?v=897b9526:9943:25)
at setupComponent (chunk-TF6X5W6F.js?v=897b9526:9904:36)
main.ts:
app.use(VueQueryPlugin, {
queryClientConfig: {
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: 0
}
}
}
});
I solved my downgrade the version to :
"@tanstack/vue-query": "^4.37.1",
I hope to fix this issue
Your minimal, reproducible example
https://github.com/Ge6ben/TanStack-Query
Steps to reproduce
main.ts:
app.use(VueQueryPlugin, {
queryClientConfig: {
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: 0
}
}
}
});
package.json :
"@tanstack/vue-query": "^5.59.13",
in vue file
<script lang="ts" setup>
import { useSupabase } from '@/plugins/supabase';
import type { Ref } from 'vue';
import { computed, onMounted, ref } from 'vue';
import { useQuery } from '@tanstack/vue-query';
const sortModel = ref(1);
export const useUpload = ({ queryKey }: { queryKey: Ref<{ sortModel: number }> }) => {
const { supabase } = useSupabase();
return useQuery(
// Query key for Vue Query - make sure it's reactive
['add-upc-scanner', queryKey.value],
async () => {
const { data, error } = await supabase.functions.invoke('/v1/doctors/user', {
method: 'POST',
body: JSON.stringify(queryKey.value)
});
if (error) {
throw new Error(error.message);
}
return data;
},{
enabled: true
}
);
};
const getQueryKey = computed(() => ({
sortModel: sortModel.value
}));
const { data: myData } = useUpload({ queryKey: getQueryKey });
onMounted(() => {});
</script>
<template>
<div class="text-right">
{{myData}}
</div
</template>
Expected behavior
Just run
How often does this bug happen?
when load in the first time
Screenshots or Videos
Platform
macOS Chrome
Tanstack Query adapter
None
TanStack Query version
5.59.13
TypeScript version
5.6.3
Additional context
No response