Skip to content
Drupal API Client

Handling Translated Content

The JSON:API Client offers a number of features to make it easy to work with localized content provided by Drupal. Let’s adapt our grid of recipes to make use of content translated in both English and Spanish from the Umami Demo profile.

The defaultLocale Option

In our previous examples we have not specified a locale, which means that the default locale was used. If you want to work with content in a different locale by default, you can specify the defaultLocale option when creating an instance of the client.

Umami Recetas

Quiche mediterráneo profundo

Dificultad: medium

Un delicioso quiche mediterráneo de capas profundas con guarnición de albahaca. Ver Receta

Bizcochos veganos de chocolate y nueces

Dificultad: medium

Una pila de brownies de chocolate y nuez, rociados con migas de nuez y nuez triturada, recién sacados del horno Ver Receta

Pasta vegetariana al horno súper fácil

Dificultad: easy

Plato de pasta con salchichas vegetarianas y cubierto con queso mozzarella y albahaca Ver Receta

Sopa de berro

Dificultad: easy

Sopa de berros con una ramita de cilantro como guarnición en un tazón blanco con borde verde. Ver Receta

Pastel Victoria

Dificultad: easy

Una esponja Victoria clásica, sin cortar, con un relleno profundo de crema de mantequilla y mermelada Ver Receta

Pizza sin gluten

Dificultad: medium

Aceitunas, albahaca y mozzarella cubren una masa de pizza sin gluten con salsa de tomate. Ver Receta

Curry verde tailandés

Dificultad: medium

Un tazón tradicional de curry verde tailandés aromático y cremoso, con trozos de pollo y verduras. Ver Receta

Crema catalana

Dificultad: medium

Postre típico catalán hecho de crema y yemas de huevo, cubierto con una capa tradicional de azúcar caramelizado para proporcionar un contraste crujiente. Ver Receta

Salsa de chile ardiente

Dificultad: easy

Una variedad iridiscente de chiles, cebollas y ajo, que suda lentamente a fuego lento Ver Receta

Borscht con costillas de cerdo

Dificultad: medium

Sopa tradicional ucraniana de remolacha, tomates y costillas de cerdo Ver Receta 
---
import { JsonApiClient } from "@drupal-api-client/json-api-client";
import { Jsona } from "jsona";


const client = new JsonApiClient(
  "https://drupal-api-demo.party", {
    serializer: new Jsona(),
    defaultLocale: "es",
  },
);
const recipes = await client.getCollection("node--recipe", {
  queryString: "include=field_media_image.thumbnail",
});
---
<style>
  .card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
  }


  .card-grid .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid var(--sl-color-text-accent);
    margin-top: 0;
    padding: 0.5rem;
  }
</style>


<div>
  <h2>Umami Recetas</h2>
  <div class="card-grid">
    {recipes.map((recipe) => (
      <div class="card" key={recipe.id}>
        <h4>{recipe.title}</h4>
        <div>
        <p>Dificultad: {recipe.field_difficulty}</p>
        <img
          src=`${client.baseUrl}${recipe.field_media_image.thumbnail.uri.url}`
          alt={recipe.field_media_image.thumbnail.resourceIdObjMeta.alt}
        />
        <a href={recipe.path.alias}>Ver Receta</a>
        </div>
      </div>
    ))}
  </div>
</div>

By providing the defaultLocale option, we can now work with content in Spanish by default. As we’ll see next, it is still possible to specify a different locale when when making individual requests.

The locale Option

Using our client defaulted to Spanish, we can still request content in English when necessary. By specifying the locale option with getResource we can override the default locale for individual requests.

Umami Recipes

Deep mediterranean quiche

Difficulty: medium

A delicious deep layered Mediterranean quiche with basil garnish View Recipe

Vegan chocolate and nut brownies

Difficulty: medium

A stack of chocolate and pecan brownies, sprinkled with pecan crumbs and crushed walnut, fresh out of the oven View Recipe

Super easy vegetarian pasta bake

Difficulty: easy

Cheesy pasta dish with vegetarian sausages and topped with mozzarella cheese and basil View Recipe

Watercress soup

Difficulty: easy

Watercress soup with a sprig of coriander as garnish in a white bowl with green trim View Recipe

Victoria sponge cake

Difficulty: easy

A classic, uncut Victoria sponge with a deep filling of butter cream and jam View Recipe

Gluten free pizza

Difficulty: medium

Olives, basil, and mozzarella top a gluten free pizza crust with marinara sauce View Recipe

Thai green curry

Difficulty: medium

A traditional bowl of creamy, aromatic Thai green curry with chunks of chicken in a small bowl with jasmine rice View Recipe

Crema catalana

Difficulty: medium

Typical Catalan dessert made from cream and egg yolks, covered with a traditional layer of caramelized sugar to provide a crispy contrast View Recipe

Fiery chili sauce

Difficulty: easy

An iridescent array of chilies, onions, and garlic, slowly sweating over a low heat View Recipe

Borscht with pork ribs

Difficulty: medium

Traditional Ukrainian soup with beets, tomatoes, and pork ribs View Recipe 
---
import { JsonApiClient } from "@drupal-api-client/json-api-client";
import { Jsona } from "jsona";


const client = new JsonApiClient(
  "https://drupal-api-demo.party", {
    serializer: new Jsona(),
    defaultLocale: "es",
  },
);
const recipes = await client.getCollection("node--recipe", {
  queryString: "include=field_media_image.thumbnail",
  locale: "en",
});
---
<style>
  .card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
  }


  .card-grid .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid var(--sl-color-text-accent);
    margin-top: 0;
    padding: 0.5rem;
  }
</style>


<div>
  <h2>Umami Recipes</h2>
  <div class="card-grid">
    {recipes.map((recipe) => (
      <div class="card" key={recipe.id}>
        <h4>{recipe.title}</h4>
        <div>
        <p>Difficulty: {recipe.field_difficulty}</p>
        <img
          src=`${client.baseUrl}${recipe.field_media_image.thumbnail.uri.url}`
          alt={recipe.field_media_image.thumbnail.resourceIdObjMeta.alt}
        />
        <a href={recipe.path.alias}>View Recipe</a>
        </div>
      </div>
    ))}
  </div>
</div>

All of our examples thus far have dealt with collections of multiple resources. Let’s next see the ways we can use the client to retrieve only a single resource.