Headless Bridge vs WPGraphQL

import { gql, useQuery } from '@apollo/client';

const GET_POSTS = gql`
  query GetPosts {
    posts(first: 10) {
      edges {
        node {
          id
          title
          slug
          excerpt
          featuredImage {
            node {
              sourceUrl
            }
          }
        }
      }
    }
  }
`;

function Posts() {
  const { data, loading } = useQuery(GET_POSTS);
  const posts = data.posts.edges.map(e => e.node);
  // ...
}

async function getPosts() {
  const res = await fetch(
    `${API_URL}/pages?type=post&limit=10`
  );
  return res.json();
}

function Posts() {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    getPosts().then(data => 
      setPosts(data.pages)
    );
  }, []);
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.uuid}>
          <h2>{post.title}</h2>
          <img src={post.featuredImage?.url} />
        </article>
      ))}
    </div>
  );
}