I have small in file my nextJS project that has the "use server" annotation. It exports a function:

export async function getData() {
  Promise.resolve({foo: "bar"});
}

And i use React Query in a client component:

const { data, isLoading, error } = useQuery({
  queryKey: ['solves'],
  queryFn: getData,
});

This does not work and throws the error:

Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

I can resolve this issue by changing the syntax to

const { data, isLoading, error } = useQuery({
  queryKey: ['solves'],
  queryFn: () => getData(),
});

Why is that? What is the difference between queryFn: getData and queryFn: () => getData()? I thought the first one was just syntactic sugar.