Skip to content
Drupal API Client

Astro

Astro is a versatile meta-framework focused on content-driven sites. It is especially notable for the ability to use a variety of framework components rather than being tied to a single framework.

This documentation site is built with Astro including all live code examples, so you’ve already seen the client and Astro in action.

Using a component script

Similar to markdown frontmatter, Astro uses a code fence (---) to identify the script in your Astro component. You can use the component script to write any JavaScript code that you need to render your template, including fetching data using this client.

Umami Recipes

  • Deep mediterranean quiche
  • Vegan chocolate and nut brownies
  • Super easy vegetarian pasta bake
  • Watercress soup
  • Victoria sponge cake
  • Gluten free pizza
  • Thai green curry
  • Crema catalana
  • Fiery chili sauce
  • Borscht with pork ribs
recipes-list.astro
---
import { JsonApiClient } from "@drupal-api-client/json-api-client";


const client = new JsonApiClient(
  "https://dev-drupal-api-client-poc.pantheonsite.io",
);
const recipes = await client.getCollection("node--recipe");
---
<h2>Umami Recipes</h2>
<ul>
  {recipes.data.map((recipe) => (
    <li key={recipe.id}>{recipe.attributes.title}</li>
  ))}
</ul>

Using getStaticPaths

Within a page that defines dynamic routes, the getStaticPaths() function can be used to determine paths that will be pre-rendered by Astro. You can use the client to fetch data from Drupal within this function.

pages/[...slug].astro
---
import Article from "../layouts/Article.astro";
import { JsonApiClient } from "@drupal-api-client/json-api-client";


export async function getStaticPaths() {
  const client = new JsonApiClient(import.meta.env.DRUPAL_BASE_URL);
  const articles = await client.getCollection("node--article");


  return articles.data.map((article) => ({
    params: { slug: article.attributes.path.alias },
    props: article,
  }));
}


const article = Astro.props;
---


<Article
  title={article.attributes.title}
  pubDate={new Date(article.attributes.created)}
>
  <div set:html={article.attributes.body.processed} />
</Article>

This will result in pages being pre-rendered for the paths /articles/give-it-a-go-and-grow-your-own-herbs, /articles/dairy-free-and-delicious-milk-chocolate and so on.

The set:html directive

In the template in the previous example we used Astro’s set:html directive to render the body of the article.

<Article
  title={article.attributes.title}
  pubDate={new Date(article.attributes.created)}
>
  <div set:html={article.attributes.body.processed} />
</Article>

Using the set:html directive is similar to setting el.innerHTML. This value is not automatically escaped, so ensure that you are only using it with fields that are being escaped and processed by Drupal.

Additional Resources