Open Ge6ben opened 1 week ago
Hi @Ge6ben 👋 It seems that the way useQuery
is used is wrong -> https://tanstack.com/query/latest/docs/framework/vue/reference/useQuery
In the codebase I can see that:
const { data } = useQuery(['todo'], fetchData)
but I reckon that should have been this:
const { data } = useQuery({ queryKey: ['todo'], queryFn: fetchData })
Can you try this solution out?
Hey @pawel-twardziak, thanks for your response for normal fetch this way works
const { data } = useQuery({ queryKey: ['todo'], queryFn: fetchData })
but when you use it, it will computed properties; it's not!
app.vue
<script lang="ts" setup>
import { useGetData } from '@/fetchDataCompose'
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
const imageUrl = ref('')
const queryKey = computed(() => imageUrl.value)
const { data } = useGetData({ queryKey })
</script>
<template>
<div class="text-right">
{{ data }}
<VueQueryDevtools />
</div>
</template>
useGetData compose:
// const { data, error, isLoading, isError } = useGetDoctors({ queryKey: imageUrl });
import { useQuery } from '@tanstack/vue-query'
import { Ref } from 'vue'
export const useGetData = ({ queryKey }: { queryKey: Ref<string> }) => {
return useQuery(
['get-data', queryKey.value],
async () => {
// Query data from Supabase
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
return response.json()
}
)
}
Describe the bug
I am using Vue
@tanstack/vue-query
I have latest packages:i get this error:
main.ts:
I solved my downgrade the version to :
"@tanstack/vue-query": "^4.37.1",
I hope to fix this issueYour minimal, reproducible example
https://github.com/Ge6ben/TanStack-Query
Steps to reproduce
main.ts:
package.json :
in vue file
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