What next.js does behind the scenes when you call server actions inside client components?

Question

today I ran into this problem, while using server actions with react-query

const { data, error, isError } = useQuery({
  queryKey: ["data"],
  queryFn: getDataFromServer,
});

At first it seems okay, but running this isError is true, but error is undefined. After hours of debugging I understood that you have to invoke server actions for them to work, like this:

const { data, error, isError } = useQuery({
  queryKey: ["data"],
  queryFn: () => getDataFromServer(),
});

As I understand next.js does something behind the scenes when you invoke server action in client components, I think maybe inserting some logic for fetching from server. At first I though that just putting the server action is enough and it will act like a normal async function, but it seems without invoking it doesn't work.

Could somebody explain what is happening here? What next.js does behind the scenes? Why can't I just give it the function without invoking it first, like a normal async function would work?

I'm using next.js v14 with app router.