How to Async/Await using useEffect for fetching data?

Question

I have looked up some questions but didn't manage to fix this issue. I am trying to add async and await to my useEffect where I am fetching for data.

Also, how can I add a simple loading text before the data is loaded first?

My code:

import { useEffect, useState } from "react";

import { Link } from "react-router-dom";

import SanityClient from "sanity.client";

const AllPosts = () => {
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    const postsQuery = `
    *[_type == 'post'] {
      _id,
      title,
      slug,
      mainImage {
        alt,
        asset -> {
          _id,
          url
        }
      }
    }
  `;

    SanityClient.fetch(postsQuery)
      .then((data) => setPosts(data))
      .catch(console.error);
  }, []);

  return (
    <>
      <h2>Blog Posts</h2>
      <h3>Welcome to my blog</h3>
      {posts &&
        posts.map((post) => (
          <Link key={post._id} to={`/blog/${post.slug.current}`}>
            <img src={post.mainImage.asset.url} alt={post.mainImage.alt} />
            <h2>{post.title}</h2>
          </Link>
        ))}
    </>
  );
};

export default AllPosts;

Answer 1

Here is how you can do async await. Have you tried this?

import { useEffect, useState } from "react";

import { Link } from "react-router-dom";

import SanityClient from "sanity.client";

const AllPosts = () => {
  const [posts, setPosts] = useState(null);

  const fetchData = async (postsQuery) => {
    try {
      const data = await SanityClient.fetch(postsQuery);
      if (data) {
        setPosts(data);
      }
    } catch(error) {
      console.log(error);
    }
  }

  useEffect(() => {
    const postsQuery = `
    *[_type == 'post'] {
      _id,
      title,
      slug,
      mainImage {
        alt,
        asset -> {
          _id,
          url
        }
      }
    }
  `;

    fetchData(postsQuery);
  }, []);

  return (
    <>
      <h2>Blog Posts</h2>
      <h3>Welcome to my blog</h3>
      {posts &&
        posts.map((post) => (
          <Link key={post._id} to={`/blog/${post.slug.current}`}>
            <img src={post.mainImage.asset.url} alt={post.mainImage.alt} />
            <h2>{post.title}</h2>
          </Link>
        ))}
    </>
  );
};

export default AllPosts;