Whisk Docs
Whisk HomeHelp CenterDeveloper Tools
v2.0.0
v2.0.0
  • The Whisk Platform
  • Whisk API Overview
    • Introduction
    • Integration
    • Authentication
      • Server Token
      • User Access Token
        • Auth Flow Example
      • Client Token
      • Anonymous Access from Client Apps
    • Whisk Sandbox
    • Getting Started
  • Whisk API Reference 2.0
    • Provisioning
      • Get provisioning
    • Autocomplete
    • Community
      • Get your Communities
      • Get Communities from a Topic
      • Discover Recommended Communities
      • Search Communities
      • Get a Community
      • Get Recipes from a Community
      • Add Recipes to a Community
      • Remove a Recipe from a Community
      • Join a Community
      • Leave a Community
    • Posts and Reviews
      • Get reviews for a recipe
      • Create or edit review
      • Create a Post
      • Get Post by id
      • Delete a Post
      • Edit a Post
      • Report a Post
      • Create a Post Reply
      • Get Post Replies
      • Delete a Post reply
      • Report a Post reply
      • Like a Post or Reply
      • Users who liked a Post or Reply
    • Public profiles
      • Hide recipe in Public profile
      • Get Recipes for Public Profile
      • Get User's public profile by user_id
      • Get User's public profile by username
    • Custom Label
    • Feed
      • Obtain a Recipe Feed
    • Food DB
      • Autocomplete
      • Search
      • Get Food
    • Food List
    • Food Log
    • Foodpairing
    • Healthy meal recommendations
      • Healthy recipe only recommendations for DA
      • Recipe recommendations for SH
      • Tailored Plan API request for Samsung TV
    • Meal Plan
      • Generate a Meal Plan
      • Meal Object
        • Get Meals
        • Delete Meal
        • Add a Meal
      • Meal Plan Settings Object
        • Get Meal Plan Settings
        • Update Meal Plan Settings
      • Meal Plan Batch
    • Recipe
      • Get a Recipe
      • Search a Recipe
      • User Recipes & Collections
        • Add User Recipe
        • Create A Recipe
        • Update External Recipe
        • Get All User Recipes
        • Update User Recipe
        • Remove Recipe from Favorites
        • Create Collection
        • Get All User Collections
        • Get Collection
        • Get Recipes from a Collection
        • Remove Collection
        • Get Smart Collection
        • Get Recipes from a Smart Collection
    • Shopping List
      • Get your Shopping Lists
      • Get a Shopping List
      • Create a Shopping List
      • Delete a Shopping List
      • Update basic details of a Shopping List
      • Move Items between Shopping Lists
      • Add Items to a Shopping List
      • Delete an Item from a Shopping List
      • Update an Item in a Shopping List
      • Clear Items from a Shopping List
    • Media
    • Store Item
    • Unit Conversion
    • Users
      • Get a User
      • Update User Settings using Patch
      • Update User Settings using Post
    • Try it out!
  • Shopping List SDK
    • Overview
    • Examples
      • Shoppable Recipes
      • Shoppable Products
      • Shoppable Media
    • Basic Setup
      • Basic Setup
      • Methods
      • Event Listeners
      • Widget
      • Subscriptions
      • Global Configuration
      • UTM Parameters
      • Using With SPA
  • Shopping List Mobile API
    • Overview
    • Examples
    • Reference
  • API Resources
    • Authentication Scopes
    • Errors and Troubleshooting
    • Cursor Pagination
    • Limits
    • Nutrients
    • Recipe Labels
    • Filtering Recipes using Custom Labels
    • Health Score, Glycemic Index, Glycemic Load
    • Whisk User Data
    • Integrated Retailers
    • Optimizing Image Load
    • Meal Plan
Powered by GitBook
On this page
  • Inspecting the live code
  • Token security
  • Parsing the results
  • Example data
  • Rendering the results

Was this helpful?

  1. Whisk API Overview

Getting Started

PreviousWhisk SandboxNextProvisioning

Last updated 4 years ago

Was this helpful?

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 . Here’s what Whisk will return when searching for “pita”.

Inspecting the live code

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".

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 "https://graph.whisk.com/v1/search?type=recipe&q=sandwich" \
    -H "Accept: application/json" \
    -H "Authorization: WHISK_GRAPH_KEY"
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))
# 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

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.

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 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”.

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 which generates a type definition from example data. This gets me auto-completion and type checking. You can also refer to the and the .

entirety of the code from this project
json2ts
API response docs
swagger API documentation
this live demo
The Demo Recipe Search