Data fetching issue in nextjs production

[zahinafsar]

We are handling all models in a react context. When we trigger to open the modal, the request returns null instead of giving the actual data.

// React Query Client Provider
const ReactQueryClientProvider = (...) => {
	const client = useMemo(() => createQueryClient(gcTime), [gcTime]);

	return (
		<PersistQueryClientProvider
			client={client}
			persistOptions={{
				persister: createIndexDBPersister(cacheKey),
				buster,
				maxAge: gcTime,
			}}
		>
			{children}
			<ReactQueryDevtools />
		</PersistQueryClientProvider>
	);
};

// Where we trigger the modal to open
const PlanCard = (...) => {
	const { confirmPlan, switchPlan, cancelPlan } = useHandlePlanModal();
	return <>{...}</>
}

// Modal provider
function HandlePlanProvider(props: { children: React.ReactNode }) {
	const auth = useAuth();
	const infiniteLoadingQuery = useQuery({
		queryKey: [auth.queryKey, 'plan-data'],
		queryFn: async () => await getData(),
		enabled: !!auth.queryKey,
	});

	return (
		<HandlePlanContext.Provider value={...}>
			{/* MODALS */}
			{props.children}
		</HandlePlanContext.Provider>
	);
}

Way to reproduce:

1. Follow the mentioned code structure
2. Implement other random query calls with minimal load time
3. Open the modal as soon as possible after first page load

Is it the code structure or is something wrong with next and tanstack-query