Show different loading on key change using useInfiniteQuery

[J4v4Scr1pt]

I have situation where I can change the key in useInfiniteQuery. This will trigger a new fetch for the hook.
Every thing works great except one little annoying detail. When the key changes it triggers my wrapping suspense but not for as long as the fetch takes. And to my knowledge useInfiniteQuery do not expose any variable that tells you it fetching new data för a new key.

The problem in other words are that I want a different loadingState when the useInfiniteQuery fetches new data when selectedGroup changes and keep the loading until the fetch is done.

Any ideas?

It's a NextJs15/React19 application and this is the page.tsx:

/* eslint-disable @tanstack/query/exhaustive-deps */
import dynamic from 'next/dynamic';
import { RecentActivitesInitial } from './types';
import { Card, CardBody, CardHeader } from '@nextui-org/card';
import { Header } from './_Components/Header';
import { GET } from '@/utils/WtApi';
import { Suspense } from 'react';
import { SkeletonRecentActivites } from './_Components/SkeletonRecentActivites';
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
import { Customer } from '../../types';

const RecentActivities = dynamic(() =>
	import('./_Components/RecentActivities').then((x) => x.RecentActivities)
);

export default async function RecentActivitiesPage({
	searchParams,
}: {
	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
	const selectedReGroup = (await searchParams).selectedReGroup;
	const showMoreActivities = (await searchParams).showMoreActivities;
	const [recentActivitiesResponse, customer] = await Promise.allSettled([
		GET<RecentActivitesInitial>(
			`activities?group=${selectedReGroup}&numberOfMonths=${showMoreActivities === 'true' ? '3' : 'undefined'}`
		),
		GET<Customer>('InitialData/GetCustomer'),
	]);
	const customerSettings = customer.status === 'fulfilled' ? customer?.value?.Settings : undefined;
	const recentActivities =
		recentActivitiesResponse.status === 'fulfilled' ? recentActivitiesResponse?.value : undefined;

	const queryClient = new QueryClient();
	await queryClient.prefetchInfiniteQuery({
		queryKey: ['recentActivities', recentActivities?.SelectedGroup],
		queryFn: async ({ pageParam }) => ({
			data: recentActivities?.RecentActivities,
			currentPage: pageParam,
			nextPage: pageParam === 3 ? null : pageParam + 1,
		}),
		initialPageParam: 2,
		getNextPageParam: (lastPage: { nextPage: number | null }) => lastPage.nextPage,
		maxPages: 3,
	});

	return (
		<Card shadow="none">
			<CardHeader className="flex items-center justify-between">
				<Header
					groups={recentActivitiesOnly?.Groups}
					defaultSelectedGroup={recentActivities?.SelectedGroup}
					defaultMoreActivities={Boolean(showMoreActivities)}
				/>
			</CardHeader>
			<CardBody className="flex flex-col gap-4">
				<HydrationBoundary state={dehydrate(queryClient)}>
					<Suspense fallback={<SkeletonRecentActivites />}>
						<RecentActivities
							praiseEnabled={customerSettings?.PraiseEnabled}
							initialSelectedGroup={recentActivities?.SelectedGroup}
							imgBasePath={process.env.IMG_BASE_PATH}
						/>
					</Suspense>
				</HydrationBoundary>
			</CardBody>
		</Card>
	);
}

This is the RecentActivities component:

'use client';

import dynamic from 'next/dynamic';
import { useInfiniteQuery } from '@tanstack/react-query';
import { Activity } from '../types';
import { RecentActivity } from './RecentActivity/RecentActivity';
import { useQueryState } from 'nuqs';
import { useTranslation } from '@/i18n/client';
import EmptyActivities from '@/public/images/overview/empty_activities.png';
import { Button } from '@nextui-org/react';
import { Spinner } from '@nextui-org/spinner';

const EmptyState = dynamic(() => import('@/components/Shared/EmptyState').then((x) => x.EmptyState));
const LoadMoreButton = dynamic(() => import('./LoadMoreButton').then((x) => x.LoadMoreButton));

type RecentActivitesProps = {
	initialSelectedGroup?: string;
	imgBasePath?: string;
	praiseEnabled?: boolean;
};

export function RecentActivities({ initialSelectedGroup, imgBasePath, praiseEnabled }: RecentActivitesProps) {
	const { t } = useTranslation('overview');
	const [, setShowPraiseModal] = useQueryState('showPraiseModal');
	const [selectedGroup] = useQueryState('selectedReGroup', { defaultValue: initialSelectedGroup || '' });

	const { data, fetchNextPage, isFetchingNextPage, hasNextPage } = useInfiniteQuery({
		queryKey: ['recentActivities', selectedGroup],
		queryFn: async ({ pageParam }) => {
			const response = await fetch(
				`Home/api/recent-activites?selectedGroup=${selectedGroup}&numberOfMonths=${pageParam <= 2 ? 'undefined' : pageParam}`
			);
			const re = await response.json();
			return {
				data: re,
				currentPage: pageParam,
				nextPage: pageParam === 3 ? null : pageParam + 1,
			};
		},
		refetchOnWindowFocus: false,
		initialPageParam: 2,
		getNextPageParam: (lastPage: { nextPage: number | null }) => lastPage.nextPage,
		maxPages: 3,
	});

	if (!Boolean(data?.pages[0]?.data?.length)) {
		return (
			<div className="mb-3 flex flex-col items-center justify-center">
				<EmptyState
					imgSrc={EmptyActivities}
					height={100}
					width={250}
					headerText={t('EmptyRecentActivitiesHeader')}
					altText="Empty Activities"
					descText={
						praiseEnabled
							? t('EmptyRecentActivitiesSmallText')
							: t('EmptyRecentActivitiesSmallTextNoPraise')
					}
				/>
				{praiseEnabled && (
					<Button
						className="mb-2"
						radius="full"
						color="primary"
						onPress={() => setShowPraiseModal('true')}>
						{t('EmptyRecentActivitiesButtonText')}
					</Button>
				)}
				{hasNextPage && <LoadMoreButton loadMore={fetchNextPage} isDisabled={isFetchingNextPage} />}
			</div>
		);
	}

	return (
		<>
			{data?.pages[0]?.data.map((activity: Activity, index: number) => (
				<RecentActivity
					key={activity.ActivityId + index}
					recentActivity={activity}
					imgBasePath={imgBasePath}
				/>
			))}
			{isFetchingNextPage && <Spinner />}
			{hasNextPage && <LoadMoreButton loadMore={fetchNextPage} isDisabled={isFetchingNextPage} />}
		</>
	);
}

[TkDodo]

when the key changes, check for isPending or isLoading. When you fetch the next or previous page, check for isFetchingNextPage or isFetchingPreviousPage.

[J4v4Scr1pt]

This was it, super thanks man!