Making API Calls Within a Svelte App

There's plenty of ways to do make API calls from within a Svelte app but I'd like to share the approach that's worked for me.

Demo: Svelte REPL - Demo

Prerequisites

First things first, start a new Svelte app. Check out Svelte's official Getting Started guide for that.

Getting Started

This tutorial will walk you through the hypothetical use case of calling an API to get a list of whiskey cocktails and displaying them. The data we're going to be working with will be in the following format:

_{Free API provided by TheCocktailDB}

{
  "drinks":[
    {"strDrink":"Allegheny","strDrinkThumb":"https:\/\/www.thecocktaildb.com\/images\/media\/drink\/uwvyts1483387934.jpg","idDrink":"11021"},
    {"strDrink":"Bourbon Sour","strDrinkThumb":"https:\/\/www.thecocktaildb.com\/images\/media\/drink\/dms3io1504366318.jpg","idDrink":"11147"},
    {"strDrink":"John Collins","strDrinkThumb":"https:\/\/www.thecocktaildb.com\/images\/media\/drink\/0t4bv71606854479.jpg","idDrink":"11580"},
  ]
}

Step 1: Create Your Data Store

Okay, within your new app, create a new file inside your src folder entitled store.js. This is where you'll "store" the data you pull from your API as well as do any data transformation.

Once you've created store.js, add the following code:

import { writable, derived } from 'svelte/store';

/** Store for your data. 
This assumes the data you're pulling back will be an array.
If it's going to be an object, default this to an empty object.
**/
export const apiData = writable([]);

/** Data transformation.
For our use case, we only care about the drink names, not the other information.
Here, we'll create a derived store to hold the drink names.
**/
export const drinkNames = derived(apiData, ($apiData) => {
  if ($apiData.drinks){
    // Create a new array of just drink names
    return $apiData.drinks.map(drink => drink.strDrink); 
  }
  return []; // Default to empty array
});

Step 2: Make Your API Call

Inside App.svelte is where we'll actually make the API call. Technically, you can do this in any of your Svelte files, but for this tutorial's purpose we'll use this.

Replace everything inside the <script> tag with the following:

import { onMount } from "svelte";
import { apiData, drinkNames } from './store.js';

// When the page is loaded, make your API call
onMount(async () => {
  // Make your API call
  fetch("https://www.thecocktaildb.com/api/json/v1/1/search.php?i=bourbon")
  .then(response => {
    // Parse response as json
    return response.json()
  })
  .then(data => {
    // Console logging for debug purposes
    console.log("Data", data);
    // Save data to store
    apiData.set(data); 
  }).catch(error => {
    // Do error handling
    console.error("Error", error);
    return [];
  });
});

Step 3: Display Your Data

Now that we've saved and transformed the data in the store, we can call the store to get and display our data. Within the same App.svelte file we added the API call to, replace the code within <main> with the following:

<h1>Whiskey Drinks Menu</h1>
<ul>
<!-- For each drink inside our derived store, create a list item -->
{#each $drinkNames as drinkName}
  <li>{drinkName}</li>
{/each}
</ul>

Voila! Pretty simple, right? With this tutorial, you made an API call, did some data transformation, and displayed it! Obviously, this is a super simple use case, but hopefully this can used as a building block in your apps going forward. Thanks for reading and good luck!

See it in action here: Svelte REPL - Demo

Blog

Making API Calls Within a Svelte App

Jason Lutterloh

Prerequisites

Getting Started

Step 1: Create Your Data Store

Step 2: Make Your API Call

Step 3: Display Your Data

Join Our Newsletter. No Spam, Only the good stuff.

Related