T
TanStack•8mo ago
rare-sapphire

Why the data i get from the useQuery it's undefined on the first render?

So i have this file with my axios request: 
import { api } from "../lib/axios";
import type { Todo } from "../types/users";

export async function getTodos() {
    const response = await api.get<Todo[]>('/todos')
    
    return response.data
}
import { api } from "../lib/axios";
import type { Todo } from "../types/users";

export async function getTodos() {
    const response = await api.get<Todo[]>('/todos')
    
    return response.data
}
And this is in other file where im using useQuery 
const { data:todosData } = useQuery({
    queryKey: ['todos'],
    queryFn: () => getTodos(),         
})

console.log(todosData.value, 'todosData value')
/\ this come as undefined 
const { data:todosData } = useQuery({
    queryKey: ['todos'],
    queryFn: () => getTodos(),         
})

console.log(todosData.value, 'todosData value')
/\ this come as undefined
Why my todosData from usingQuery is undefined at first render and only take the data from resquest if i save the request file? Is there a way to in first render the todoData render the data from request?
4 Replies
exotic-emerald
exotic-emerald•8mo ago
Your getTodos needs to finish executing first before any data is available todosData is returned as ref. If you use it in the template it will re-render when data is available
rare-sapphire
rare-sapphireOP•8mo ago
So im using the todosData as the data for a tanstack table, in this case as the data prop of useVueTable. So apparently i was passing todoData.value to my data prop of table, but the correct aproach is only pass todoData, but why ?
exotic-emerald
exotic-emerald•8mo ago
Not sure how to answer this. Because it is how Vue reactivity fundamentally works
rare-sapphire
rare-sapphireOP•8mo ago
hmm understand, btw ty for the help ^^

Did you find this page helpful?