At the moment I'm fetching everything on my Client Component but I heard that it's not the right way to do and I try to transition to the good way. Here is my component :

"use client";

import { useEffect, useState } from "react";
import sanityClient from "@/lib/sanity";

const fetchHunters = async () => {
  const query = `...`;
  return await sanityClient.fetch(query);
};

export default function Hunters() {
  const [hunters, setHunters] = useState([]);

  useEffect(() => {
    fetchHunters()
      .then((data) => {
        Array.isArray(data) ? setHunters(data) : setHunters([data]);
        setEmptyTableText("No hunters found.");
      })
      .catch((error) => {
        console.error("Failed to fetch hunters:", error);
        setHunters([]);
      });
  }, []);

  return (
    ...
  );

Everything I tried to transition from this fetchHunters method inside the client component didn't work as intended