Update the select at X time, without doing a refetch

[jlap]

Hello!

I have some data that is only valid for one day. The api returns the start and end date of the object, The api also will always return the next set of valid data.

The goal is that when the timer expires, not all users hit the server with a request for new valid data. We're instead able to refresh the info displayed to the user via the data we already have (at least once, but our users don't tend to stay on the page for days. They do tend to come consult the data around the time the data expires however).

I'm using a select function to filter which data to display depending on the time. I'm wondering how to trigger a new select when the data expires. If we use the staletime or the refetch interval, the api will be called again, which is undesired.

I tried wrapping the select function in a computed (we are using vue) but the select function doesn't seem to re-run when the compute value is changed.

[TkDodo]

select runs on every render, so, re-render the component when the timer expires ?

/edit: sorry, I missed the “we’re using vue” part.

[jlap]

Vue works similar enough where we had that thought. It felt a bit crude / heavy for what it was trying to accomplish.

I'll post the solution we ended up going with, even though it isn't done really with tanstack.

[jlap]

For future googlers, we ended up managing this use case by creating a computed variable that does the filtering, instead of trying to use a tanstack select. You get your data from a regular use query, then you set a ref when your timeout occurs so vue knows to re-run your computed.

More or less like this:

const { data } = useQuery(etc etc);

const refreshDaily = ref(0);
const dailyData = computed(() => {
  if (!data || !data.value || !data.value.length) return;
  const dailyData = filterCurrentValidData(data.value);

  const time = new Date(dataRefreshTime) - Date.now();

  window.setTimeout(() => {
    refreshDaily.value++;
  }, time);
  return dailyData;
});

If there's a more "tanstack" way of achieving the same I'd be interested in it, but this serves our purpose well enough.