React

React is a popular JavaScript library for building component-based user interfaces.

Fetching data in a useEffect hook

Within a client-side React component, you’ll need to fetch your data in a useEffect hook in order to use async/await.

Umami Articles

import { useState, useEffect } from "react";
import { JsonApiClient } from "@drupal-api-client/json-api-client";

const client = new JsonApiClient(
  "https://dev-drupal-api-client-poc.pantheonsite.io",
);

export default () => {
  const [articles, setArticles] = useState();
  useEffect(() => {
    const getArticles = async () => {
      setArticles(await client.getCollection("node--article"));
    };
    getArticles();
  });
  return (
    <div>
      <h2>Umami Articles</h2>
      <ul>
        {articles &&
          articles.data.map((article) => (
            <li key={article.id}>{article.attributes.title}</li>
          ))}
      </ul>
    </div>
  );
};

If you’re using a React meta-framework like Next.js or Remix this most likely won’t be necessary as they have support for top-level await.

Additional Resources

• React Documentation