I have a query that fetches some data in a date range,
I recently moved from doing it myself to using react-query and am stuck on the cache logic.
What I want is if this date range was fetched once, it gives me the data, else it fetches the data and of course save it with the current date range

I tried this

    const { data, isFetching} = useQuery({
        queryKey: ["key1", { startDate, endDate}],
        queryFn: () => getData(startDate, endDate),
        initialData: [],
    });

which got me what I wanted but also not, my problem here is when I’m looking at the network tab I can see on the first load it fetches the data, Perfect.
then I change to another date range and it fetches this data, also Perfect.
but then I go back to the first date range and I can see the old data displayed directly, BUT i see a request on the network tab for it.

How can I stop that!
it’s also causing me trouble because I use isFetching to display some loading overlay, so even though I can clearly see the data is plotted already i still have to wait through it, and finally the API call is a bit expensive on the server so i don’t wanna fetch if I already have the cache