How to handle debouncing related query keys?

[aryzing]

As an example, suppose we have a city and temp, and want to fetch a healthRisk value. The city is selected by the user, and the temperature is a high-frequency real-time feed of the selected city:

const city = useSelectedCity();
const temp = useCityTemp(city); // high frequency feed, every 1s.

const { data: healthRisk } = useQuery({
  queryKey: [city, temp],
  queryFn: async () => getRisk(city, temp),
});

Is there a way to debounce this in a way such that the health risk is fetched at most once per minute, but immediately when the user selects a new city? Or is there a better way to compose these pieces of data to achieve the desired effect?

[TkDodo]

you need to debounce the value that goes into the queryKey yourself. I talked about this here:

https://www.youtube.com/watch?v=l3PxErcKeAI&t=1024s