API being called on page mount every time despite having stale and cache values of 5 minutes

[alimurad-1]

Hi @ALL, I have been working on a react native expo project and I have cached an api with gcTime of 10 minutes and staleTime of 5 minutes. I am adding the relevant components

//useAgentProfile.tsx

import { useQuery } from '@tanstack/react-query';

import { AgentApi, ErrorResponseBody } from '@/api';
import { Agent } from '@/types';

import useLocale from './useLocale';

const useAgentProfile = (id?: number, keys: string[] = [], enabled: boolean = true) => {
  const locale = useLocale();
  const agentApi = new AgentApi(locale);

  return useQuery<Agent, ErrorResponseBody>({
    queryKey: ['agent', 'profile', id, ...keys],
    queryFn: () => agentApi.fetchAgentProfile(id).then(({ data }) => data),
    enabled: !!id && enabled,
    staleTime: 5 * 60000,
    gcTime: 10 * 60000,
    refetchOnMount: false,
  });
};

export default useAgentProfile;

const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false,
            retry: false,
          },
        },
        queryCache: new QueryCache({
          onError: (_: any, query) => {
            // 🎉 only show error toasts if we already have data in the cache
            // which indicates a failed background update
            // if (query.state.data) {
            //   message.error(t`Something went wrong`);
            // }
          },
        }),
      }),
  );

The keys do not change on page mount, stale is false, and data exists in cache. I've verified it using following consoles

Cache for query key: ["agent", "profile", 'a number here']
Cached data: true
Is data stale?: false
Data updated at: 10/6/2025, 6:53:46 PM

what are the common troubleshooting steps or some common beginners mistakes that I might be making.