Is it okay to call a server action directly from a useQuery or a useMutation hook? (with example)

// actions.ts

"use server";

export const getPosts = async () => {
  // fetch from db
  const posts = [{ id: 1, name: "Hello World" }];
  return posts;
};

// page.tsx

"use client";

import { useQuery } from "@tanstack/react-query";
import { getPosts } from "./actions";

export default function Home() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["posts"],
    queryFn: getPosts,
  });

  return error ? (
    <div>Oops, an error</div>
  ) : isLoading ? (
    <div>Loading...</div>
  ) : (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.name}</li>
      ))}
    </ul>
  );
}