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 },
);

pagination

pagination

object contains a

pageNumber

pageNumber

.
On my initial load this is

. If I then go to the next page this is

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

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?

TanStack•3y ago•

2 replies

dangerous-fuchsia

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 },
);

pagination

pagination

object contains a

pageNumber

pageNumber

.
On my initial load this is

. If I then go to the next page this is

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

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

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

Similar Threads

Similar Threads

Similar Threads