initialData with placeholderData?

[J4v4Scr1pt]

Hello!

I'm building a page where we have a table. The application is built in NextJs 14 and we initially fetch the data on the server and provide the data to the client component where we initiate the useQuery initialData with the data fetched on the server.
Then we want to keep the previous data when the user step to the next page of the table, then we use the placeholderData to do that.

But what happens now is that every time you press next page on the pagination stepper the table shows the initalData as a "placeholder" on every page.

We have tried using only placeholderData, but same behavior.

What are we doing wrong here?

	const { data, isLoading, isFetching, refetch } = useQuery<Organizations>({
		queryKey: [createQueryKey(filterState)],
		queryFn: async () => {
			const request = createRequest(filterState);
			try {
				return await postOrganizationFilters(request, groups, locale);
			} catch (error) {
				console.error('Error fetching Organizations', error);
				throw error;
			}
		},
		initialData: () => initialData,
		placeholderData: keepPreviousData,
		refetchOnWindowFocus: false,
		refetchOnMount: false,
	});  

[TkDodo]

when the key changes (filterState), you get a new cache entry. That cache entry then gets initialData passed. initialData puts data in the cache, and once the cache has data, placeholderData won’t do anything because there is no “place to hold” for it :)

you have to be specific with initialData when you want to apply it. I guess you only want to apply it for a specific filterState:

initialData: () => isMyFilterTheFilterThatShouldGetInitialData(filterState) ? initialData : undefined

[J4v4Scr1pt]

Thanks for the answer!
Ok I understand, I must have misunderstood the initialData then. When I read the docs I thought when I used it as a function it would be initiated only once when the query is initialized. But this method is actually run every time the cache entry changes?

How would you recommend working with case like this?
This is the scenario, we have Nextjs 14 App router application.
We get the initial data on the server(RSC) with default filtering applied, we fill the table with this data to have a fast load to the user. because most users don't change the filters.
Then the user can change the filters and step back and forth in the table using pagination. We want the previous page to hold the data (placeholderData) until the new data is loaded.

We have now disabled initalData because of the buggy result with it active. The page is now loaded with no table data and useQuery do the classic fetch to get initalData from on client in other words no using the power of the server and RSC. This is not 2024 way of doing it I would say 😅.

Have been looking into TanStackTable to see if it would be a better choice for us, but I'm unsure because I have never used it 😄.

[TkDodo]

When I read the docs I thought when I used it as a function it would be initiated only once when the query is initialized

that is what’s happening. but the queryKeys ['organizations', { filters: 'foo' }] and ['organizations', { filters: 'bar' }] are two different queries. So when you switch filters, you might create a new query if it does not exist, and then the initialData function runs.

We get the initial data on the server(RSC) with default filtering applied

The options are:

• only set initialData when the filter equals the default filter
• use <HydationBoundary> instead of initialData for SSR. This is very likely the better choice.

[J4v4Scr1pt]

Thanks, I'm very thankful for your help, I will test with HydationBoundary.
Just providing initalData works very good in most cases, but for a table with filters this may not be the case 😅.

You are a bit bias I know... 😄, but do you think TanStackTable would fit better for this use case?

[TkDodo]

This shouldn’t matter for the query integration.

[J4v4Scr1pt]

Sorry for taking so long to get back to you.
I have followed this guide in the docs. But I get the error: No QueryClient set, use QueryClientProvider to set one. I have searched and as I understand it it usually happens when you have several instances of react-query. But in my case this not true.

Package.json:

"@tanstack/react-query": "^5.61.5",
"next": "14.2.18",
"react": "18.3.1",
"react-dom": "18.3.1", 

I wrap my whole application in the Provider from the same page in the docs above, changed nothing.
And basically copy/paste the code from the hydration example also, only replacing my get methods.

Page.tsx:

import dynamic from 'next/dynamic';
import { ActivitesInitial } from './types';
import { Card, CardBody, CardHeader } from '@nextui-org/card';
import { Header } from './_Components/Header';
import { GET } from '@/utils/Api';
import { Suspense } from 'react';
import { SkeletonActivites } from './_Components/SkeletonActivites';
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';

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

export default async function RecentActivitiesPage() {
	const ActivitiesResponse = (await GET(
		'api/activities?selectedGroup=undefined'
	)) as ActivitesInitial;
        const ActivitiesOnly = ActivitiesResponse?.Activities;
        
	const queryClient = new QueryClient();
	await queryClient.prefetchQuery({
		queryKey: [
			'activities',
			ActivitiesResponse.SelectedGroup,
		],
		queryFn: async () => ActivitiesOnly ,
	});

	return (
		<Card shadow="none">
			<CardHeader className="flex items-center justify-between">
				<Header
					groups={ActivitiesResponse.Groups}
					defaultSelectedGroup={ActivitiesResponse.SelectedGroup}
				/>
			</CardHeader>
			<CardBody className="flex flex-col gap-4">
				<HydrationBoundary state={dehydrate(queryClient)}>
					<Suspense fallback={<SkeletonActivites />}>
						<Activities
							initialSelectedGroup={RecentActivitiesResponse.SelectedGroup}
						/>
					</Suspense>
				</HydrationBoundary>
			</CardBody>
		</Card>
	);
}

Activities.tsx:

'use client';

import dynamic from 'next/dynamic';
import { useQuery } from '@tanstack/react-query';
import { Activity } from '../types';
import { Activity } from './Activity';
import { useQueryState } from 'nuqs';

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

type ActivitesProps = {
	initialSelectedGroup: string;
};

export function RecentActivities({ initialSelectedGroup }: ActivitesProps ) {
	const [selectedGroup] = useQueryState('selectedReGroup', { defaultValue: initialSelectedGroup });

	const { data: Activities, isFetching } = useQuery<Activity[]>({
		queryKey: ['activities', selectedGroup],
		queryFn: async () => {
			const response = await fetch(
				`Home/api/activites?selectedGroup=${selectedGroup}`
			);
			if (!response.ok) {
				return [];
			}
			return await response.json();
		},
		refetchOnWindowFocus: false,
	});

	if (isFetching) return <SkeletonActivites />;

	return Activities?.map((activity, index) => (
		<Activity key={activity.ActivityId + index} activity={activity} />
	));
}

TanstackProvider.tsx:

'use client';

import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

function makeQueryClient() {
	return new QueryClient({
		defaultOptions: {
			queries: {
				// With SSR, we usually want to set some default staleTime
				// above 0 to avoid refetching immediately on the client
				staleTime: 60 * 1000,
			},
		},
	});
}

let browserQueryClient: QueryClient | undefined = undefined;

function getQueryClient() {
	if (isServer) {
		// Server: always make a new query client
		return makeQueryClient();
	} else {
		// Browser: make a new query client if we don't already have one
		// This is very important, so we don't re-make a new client if React
		// suspends during the initial render. This may not be needed if we
		// have a suspense boundary BELOW the creation of the query client
		if (!browserQueryClient) browserQueryClient = makeQueryClient();
		return browserQueryClient;
	}
}

export function TanstackProvider({ children }: { children: React.ReactNode }) {
	// NOTE: Avoid useState when initializing the query client if you don't
	//       have a suspense boundary between this and the code that may
	//       suspend because React will throw away the client on the initial
	//       render if it suspends and there is no boundary
	const queryClient = getQueryClient();
	return (
		<QueryClientProvider client={queryClient}>
			{children}
			<ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-right" position="bottom" />
		</QueryClientProvider>
	);
}

[J4v4Scr1pt]

I found the issue.
I needed to extract the HydrationBoundary to it's own component with 'use client' above like this:

'use client';
import { DehydratedState, HydrationBoundary } from '@tanstack/react-query';
import { ReactNode } from 'react';

interface ClientHydrationWrapperProps {
	state: DehydratedState;
	children: ReactNode;
}

export default function ClientHydrationWrapper({ state, children }: ClientHydrationWrapperProps) {
	return <HydrationBoundary state={state}>{children}</HydrationBoundary>;
}

The docs do not state this anywhere, is this by design or a miss?
Because the docs state this:
// HydrationBoundary is a Client Component, so hydration will happen there.