Getting Started

To illustrate how to use Whisk’s API, we’ll take a look at the search API endpoint as an example. You can search for recipes based on a phrase in this live demo. Here’s what Whisk will return when searching for “pita”.

The Demo Recipe Search

Inspecting the live code

The code for this example is hosted on Glitch, a site for developing and deploying Node.js apps. It's easy to copy an app on Glitch and to "remix" it to suit your needs. You can inspect the entirety of the code from this project by clicking the fish, and then clicking “View Source”. You can also make a copy of the app to edit and make your own by selecting “Remix on Glitch”.

Token security

To use the Whisk API, you’ll need a token to authenticate. To avoid others masquerading as you - you shouldn’t include this token in a public-facing site. On Glitch, secrets can be saved in a secret .env file which isn’t copied to remixes of the site. In this demo, this is how data is transferred without exposing the token:

The browser sends a POST request to the back end at /search The backend then sends an authenticated request to https://graph.whisk.com/v1/search and forwards the results back to the browser.

Because the token won't be copied when you remix this app, you'll need to generate your own token, and paste it into the .env file The API call The following snippet is how we call the Whisk API. You'll see a GET request with parameters encoded in the URL. Notice the Authorization header is where the token is added to the request and its value should look like the following "Token isUafj9s8dfja98dxHAP1".

JavaScript

const fetch = require("node-fetch");
const headers = {
  "Content-Type": "application/json",
  Authorization: process.env.WHISK_GRAPH_KEY
};

function searchWhisk(phrase) {
  const url = `https://graph.whisk.com/v1/search?type=recipe&q=${phrase}`;
  return fetch(url, {
    method: "GET",
    headers
  })
    .then(res => res.json())
    .then(responseData => {
      console.log(`Got ${responseData.data.length} items`);
      return responseData;
    });
}

cURL

curl "https://graph.whisk.com/v1/search?type=recipe&q=sandwich" \
    -H "Accept: application/json" \
    -H "Authorization: WHISK_GRAPH_KEY"

Python3

from urllib.request import Request, urlopen
from urllib.parse import urlencode
import json

query = urlencode([('type', 'recipe'), ('q', 'sandwich')])
req = Request('https://graph.whisk.com/v1/search?' + query)
req.add_header("Authorization", WHISK_GRAPH_KEY)
data = json.load(urlopen(req))

Python using requests

# might need to `pip install requests`
import requests
url = "https://graph.whisk.com/v1/search?type=recipe&q=sandwich"
headers = {"Authorization": WHISK_GRAPH_KEY}
data = requests.get(url, headers=headers).json()

Parsing the results

The above API returns a JSON object with 25 recipes with about 10 properties each. In this demo we only use the name of the recipe, a link to the original recipe site, and an image. To handle the data, I personally use TypeScript, so whenever I access an API that returns JSON, I paste the resulting object itself into json2ts which generates a type definition from example data. This gets me auto-completion and type checking. You can also refer to the API response docs and the swagger API documentation.

Example data

For example, here's a recipe I found when searching for "sandwich".

{
  "content": {
    "id": "101ddf209fadc4c6f061bc43416ecad5a7d0b3d6c6a",
    "name": "Sourdough steak sandwich with bean pesto",
    "description": "This hearty sandwich makes a great lunch or midweek meal",
    "ingredients": [
      {
        "text": "4 x 130g thin-cut beef steaks"
      },
      // ...
      {
        "text": "1 avocado, sliced"
      }
    ],
    "images": [
      // ...
    ],
    "videos": [],
    "source": {
      "name": "tesco.com",
      "displayName": "Tesco Real Food",
      "sourceRecipeUrl": "https://realfood.tesco.com/recipes/sourdough-steak-sandwich-with-bean-pesto.html",
      "license": "Fairuse"
    },
    "numberOfServings": 4,
    "durations": {
      "cookTime": 20,
      "prepTime": 15,
      "totalTime": 35
    },
    "labels": {
      "cuisine": [
        {
          "name": "british",
          "displayName": "British"
        }
      ],
      // ...
    },
    "constraints": {
      "violates": {
        "diets": [
          "pescatarian",
          "vegan",
          "vegetarian",
          "lacto-vegetarian",
          "ovo-lacto-vegetarian",
          "ovo-vegetarian",
          "dairy-free"
        ],
        "avoidances": [
          "gluten",
          "wheat",
          "yeast",
          "milk",
          "lactose"
        ]
      }
    },
    "author": {
      "name": "Tesco Real Food"
    },
    "language": "en"
  },
  "matchedIngredients": [
    {
      "name": "meat"
    },
    {
      "name": "bread"
    }
  ]
}

Rendering the results

The website you reach in the demo is a Vue front end, which renders a list of results by accessing the content for the name of the dish, and the images.

You can find the following template in index.html:

<li v-for="item in results" class="recipe">
  <a :href="item.content.source.sourceRecipeUrl">
    <span class="recipe-title">{{ item.content.name }}</span>
    <img
      v-if="item.content.images[0]"
      :src="item.content.images[0].url"
    />
  </a>
</li>

That wraps up the end-to-end walkthrough on how to search for recipes using the Whisk API, and display them. You'll find a complete list of APIs and features to help you use the Whisk API in your own site or mobile App.