query when filters change, but keep the current results until new data is loaded
const { isLoading, error, data: cars} = useQuery({
queryKey: ['jobs', JSON.stringify(filters)],
queryFn: () => fetchCars(),
})
I'm just iterating over cars and rendering them. I have a text input field and when i press a key, i update the redux store (filters)
The problem is, everytime I press a key, now I'm seeing 1 second of loading screen (or just an empty div, based on my configuration). Im guessing that is because "cars" variable is set to undefined when im making a new fetch this code, and while its undefined, thats why its not showing any cars on the DOM (im not 100% sure)
What I want is, when im making a new request, it should still show the results from previous query. i dont want to see an empty screen until the new data is loaded. Tried "keepPreviousData" but it throw some weird error and I couldn't fix it.
queryKey: ['jobs', JSON.stringify(filters)],
queryFn: () => fetchCars(),
})
I'm just iterating over cars and rendering them. I have a text input field and when i press a key, i update the redux store (filters)
The problem is, everytime I press a key, now I'm seeing 1 second of loading screen (or just an empty div, based on my configuration). Im guessing that is because "cars" variable is set to undefined when im making a new fetch this code, and while its undefined, thats why its not showing any cars on the DOM (im not 100% sure)
What I want is, when im making a new request, it should still show the results from previous query. i dont want to see an empty screen until the new data is loaded. Tried "keepPreviousData" but it throw some weird error and I couldn't fix it.