Update useQuery key but fetch in background

[robaguilera]

Hello! I'm a little stuck trying to achieve something specific looking for a little help.

I have a UI that fetches and displays data between two date ranges. I have a couple of calendar inputs that when the user clicks a date the setRange function fires and the query reruns.

  const [dateRange, setRange] = useState({
    start: defaultFromDate,
    end: defaultToDate,
  });
  const { isLoading, isFetching, data: assets } = useQuery(["upcomingEarnings", { start: dateRange.start, end: dateRange.end }], fetchEarnings);

That's all good and works as expected, but what I'm trying to achieve now is when the query reruns isLoading as well as isFetching becomes set to true my data variable gets set to undefined and it displays my initial loading spinner UI. What I would prefer is to instead fetch the data silently in the background and display a different type of loading spinner.

What I'm thinking that I'd want is something like isLoading is set to false, isFetching is set to true, the data persists but then is updated when the query finishes running.

Thanks and sorry in advance if I missed in the docs how to achieve this. Thanks for you help.

[TkDodo]

keepPreviousData: true is what you want. Read about lagged queries here: https://react-query.tanstack.com/guides/paginated-queries

[robaguilera]

Ah that was it. Thanks 👍!