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.