HydrationBoundary causing Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

[Rodrigo-JM]

I've followed the example for integrating TanStack/query into NEXTJS 14.

But when i try to use
const dehydratedState = dehydrate(queryClient);
with
<HydrationBoundary state={dehydratedState}>

I get the error
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". [function] ^^^^^^^^ at stringify (<anonymous>) digest: "771832800"

this is the query i am trying to prefetch
await queryClient.prefetchQuery({ queryKey: ["top-bar"], queryFn: getTopBar, });

if i change getTopBar to another function that doesn't fetch any data, it works. but when i return the getTopBar function to its normal code, it doesn't work. And I am marking the file with "use server" anyway

"use server";
import API from "services/_axios";
import { FirebaseBanner, IFirebaseTopBar, IHomeBanner } from "types/banners";

const URL = "/banners";

export const getTopBar = () => {
  return API.get<IFirebaseTopBar[]>(`${URL}/top-bar`);
};

[TkDodo]

try queryFn: () => getTopBar()

[Rodrigo-JM]

hey Dominik! Thanks for the quick reply. I tried changing up the call and such. What eventually worked was moving from axios to fetch.
not a huge fan of fetch

[TkDodo]

oh well if Api.get is an axios call, then you need to extract .data and only return that from your function. Otherwise, you'll have lots of unserializable stuff in the cache ... axios returns the whole request config etc ..

[TkDodo]

export const getTopBar = async () => {
  const response = await API.get<IFirebaseTopBar[]>(`${URL}/top-bar`);
  
  return response.data
};

[Rodrigo-JM]

wow! this was so helpful. I was using the select function to transform the response. but this approach worked!