reactjs - react.jsを使用してsanity.ioでAPIデータをフィルタリングする方法は?

Question

こんにちは、私はコミュニティに不慣れで、ここでの仕組みを学んでいます。私の壊れた英語を通して理解しようとしてください。

APIに200個のデータがあるとしますが、4つのランダムデータをフロントエンドにプルしたかっただけです. より明確にするために、データはReact.js で groq ql を使用したsanity.io からのブログ投稿です。API からのすべてのデータを表示するコードを次に示します。関数を試しsliceましたが、機能しませんでした。

const SideBarBlog = () => {
  const [postData, setPost] = useState(null);
 
  useEffect(() => {
    sanityClient
      .fetch(
        `*[_type=="post"]{
        title,
        slug,
        mainImage{
          asset->{
            _id,
            url
          },
          alt,
          
        }
      }`
      )
      .then((data) => setPost(data))
      .then((data) => console.log(postData))

      .catch(console.error);
  }, []);

return (
    <>
      {postData &&
        postData.map((post, index) => (
       
            <div className="row sidebar-blog mb-4 p-3" key={index}>
              <div className="col-md-8">
                {/* sideblog title */}
                <p className="sidebolg-blogtitle mb-1">{post.title}</p>
              </div>
            </div>
         
        ))}
    </>
  );
};

export default SideBarBlog;