exotic-emerald

handling timestamps

Hey, we have lots of data on the backend which we segregate by time stamp and fetch in a range with a picker on the UI. How would you utilise react query here? As the user changes time stamp range try to do a custom merge of the data and store by key?

6 Replies

exotic-emerald•4y ago

Hi. Set time stamp as query key and pass it as url search param into your queryFn (fetch/axios/etc) backend API call. Then do whatever you need

exotic-emeraldOP•4y ago

But if you pass something like start=01-01-21&end=01-10-22 then change the date for one it’s going to store it again under a new cache key each time you fetch. If I change the start date to 01-10-21 I expect the data to just be returned as it’s there. Similarly I don’t want to fetch the whole range as theres a lot of data and it’ll be slow, only if the user requests it. I was planning on setting the first month as the default for perspective

rare-sapphire•4y ago

you can use keepPreviousData: true to show data of the "old" query key while you are fetching the new data. Storing them in separate places in the cache is still the right way to go because it is different data coming from a different endpoint (different query params) I have an example with "filters" here, it's pretty much the same: https://tkdodo.eu/blog/practical-react-query#treat-the-query-key-like-a-dependency-array

Practical React Query

Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful...

exotic-emeraldOP•4y ago

Will have a read. Thanks

exotic-emeraldOP•4y ago

@TkDodo 🔮 It seems like this isn't going to be that performant, I'm using useQueries as we have a few timeseries which depend on timestamps. Just changing the timestamps by an hour introduces many more cache keys which will probably not be used again. Is there a way to call refetch with useQueries? I was thinking of storing a less specific key and refetching when timestamps change and merging the cache together so we fetch less data points. e.g. something like:

const {data, refetch } = useQuery(['foo','bar','baz-1'], (dates) => {
// get existing cache key data - ['day1','day2']
// if dates reside in cache return subset of data 
// If no dates overlap fetch for date range
// if dates overlap - ['day1','day2', 'day3'] fetch ['day3'] & return cache 
})

const handleTimestampChange =(e) => {
...
setState(..)
refetch()
}

const {data, refetch } = useQuery(['foo','bar','baz-1'], (dates) => {
// get existing cache key data - ['day1','day2']
// if dates reside in cache return subset of data 
// If no dates overlap fetch for date range
// if dates overlap - ['day1','day2', 'day3'] fetch ['day3'] & return cache 
})

const handleTimestampChange =(e) => {
...
setState(..)
refetch()
}

rare-sapphire•4y ago

if you are concerned about unused keys for whatever reason (memory?), you can set a lower cacheTime. With cacheTime: 0, they will be removed as soon as they are unused.

Gaming

Programming

handling timestamps

Did you find this page helpful?