Why is my query refetching when using the same query key?

I have this setup

const dataQuery = useQuery(
  [
    'customers',
    { ...pagination, sorting, },
  ],
  fetchCustomers,
  { keepPreviousData: true, refetchOnWindowFocus: false, cacheTime: 1000 * 60 * 5 },
);

const dataQuery = useQuery(
  [
    'customers',
    { ...pagination, sorting, },
  ],
  fetchCustomers,
  { keepPreviousData: true, refetchOnWindowFocus: false, cacheTime: 1000 * 60 * 5 },
);

const dataQuery = useQuery(
  [
    'customers',
    { ...pagination, sorting, },
  ],
  fetchCustomers,
  { keepPreviousData: true, refetchOnWindowFocus: false, cacheTime: 1000 * 60 * 5 },
);

const dataQuery = useQuery(
  [
    'customers',
    { ...pagination, sorting, },
  ],
  fetchCustomers,
  { keepPreviousData: true, refetchOnWindowFocus: false, cacheTime: 1000 * 60 * 5 },
);

pagination

pagination

object contains a

pageNumber

pageNumber

pageNumber

pageNumber.
On my initial load this is

1

1. If I then go to the next page this is

2

2 and we get a new ajax request as expected.
However what's throwing me off is that if I then go back to the previous page so the value is

1

1 again the data is immediately returned, but then it seems a background request is fired to refresh the data.
How can I stop that background request?

Why is my query refetching when using the same query key?

Similar Threads

Similar Threads

Similar Threads