Skip to content
Drupal API Client

Working With an Individual Recipe

In our examples thus far we have been working with JSON:API collections, which include multiple resources of a specific type. Next we’ll look at methods provided by the client that allow you to work with individual resources.

Getting a recipe using getResource

If you know the id of the recipe you are looking for, you can use the getResource method to retrieve it. For example, if you used getCollection elsewhere in your application to get a list of all recipes, you likely already know the id of any individual recipe you want to retrieve.

Below we’ll use getResource to display the instructions for a recipe with the id ‘35f7cd32-2c54-49f2-8740-0b0ec2ba61f6’.

Deep mediterranean quiche

  1. Preheat the oven to 400°F/200°C. Starting with the pastry; rub the flour and butter together in a bowl until crumbling like breadcrumbs. Add water, a little at a time, until it forms a dough.
  2. Roll out the pastry on a floured board and gently spread over your tin. Place in the fridge for 20 minutes before blind baking for a further 10.
  3. Whilst the pastry is cooling, chop and gently cook the onions, garlic and courgette.
  4. In a large bowl, add the soya milk, half the parmesan, and the eggs. Gently mix.
  5. Once the pastry is cooked, spread the onions, garlic and sun dried tomatoes over the base and pour the eggs mix over. Sprinkle the remaining parmesan and careful lay the feta over the top. Bake for 30 minutes or until golden brown.
 
---
import { JsonApiClient } from "@drupal-api-client/json-api-client";
import { Jsona } from "jsona";


const client = new JsonApiClient(
  "https://dev-drupal-api-client-poc.pantheonsite.io"
);
const recipe = await client.getResource(
  "node--recipe",
  "35f7cd32-2c54-49f2-8740-0b0ec2ba61f6",
);
---
<h2>{recipe.data.attributes.title}</h2>
<div set:html={recipe.data.attributes.field_recipe_instruction.processed} />

Getting a recipe using getResourceByPath

As we saw above, using getResource requires us to know the id of the resource we intend to retrieve. There will likely be cases where your front end application knows the requested path, but doesn’t know the id of the resource in Drupal that it should resolve to. In these cases the getResourceByPath method allows you to retrieve a single resource by providing the path instead of the id.

Let’s adapt our example of rendering an example article to use getResourceByPath.

Deep mediterranean quiche

  1. Preheat the oven to 400°F/200°C. Starting with the pastry; rub the flour and butter together in a bowl until crumbling like breadcrumbs. Add water, a little at a time, until it forms a dough.
  2. Roll out the pastry on a floured board and gently spread over your tin. Place in the fridge for 20 minutes before blind baking for a further 10.
  3. Whilst the pastry is cooling, chop and gently cook the onions, garlic and courgette.
  4. In a large bowl, add the soya milk, half the parmesan, and the eggs. Gently mix.
  5. Once the pastry is cooked, spread the onions, garlic and sun dried tomatoes over the base and pour the eggs mix over. Sprinkle the remaining parmesan and careful lay the feta over the top. Bake for 30 minutes or until golden brown.
 
---
import { JsonApiClient } from "@drupal-api-client/json-api-client";
import { Jsona } from "jsona";


const client = new JsonApiClient(
  "https://dev-drupal-api-client-poc.pantheonsite.io"
);
const recipe = await client.getResourceByPath(
  "/recipes/deep-mediterranean-quiche"
);
---
<h2>{recipe.data.attributes.title}</h2>
<div set:html={recipe.data.attributes.field_recipe_instruction.processed} />

Additional Resources