There are many times that we want to limit how much we fetch data from our APIs, especially if a control eagerly fetches data, because if multiple of the same control is placed on a page, they will all make the same API call to fetch the exact same data.

This isn't the simplest thing to do because the API calls are asynchronous, meaning they'll return Promises, which can't be stored in the string-only client-side storage mechanisms. This means that we have to wait until the server responds before we can cache the result (as a JSON string), so in the meantime more requests can be fired to fetch the same data while we're waiting for one to finish and cache. So, we also need an in-memory cache of the Promise that we can return for subsequent calls until the results come back and are able to be put into the longer-term cache.

To handle this, we have a function: cachePromise. To use it, import it from "@Obsidian/Utility/cache", then pass it a key (the identifier name it's stored under), a function that returns a Promise, and optionally an expiration time (defaults to one minute). It will return a function that you can call that will fire off the request the first time it's called and pull from the appropriate cache every other time.

For example:

import Cache from "@Obsidian/Utility/cache";
import { useHttp } from "@Obsidian/Utility/http";
import { RockDateTime } from "@Obsidian/Utility/rockDateTime";

const http = useHttp();

const fetchConfig = Cache.cachePromise("uniqueKeyForThisFunction", async () => {
    const result = await http.post<ConfigBag>("/api/v2/Controls/GetConfig");

    if (result.isSuccess && result.data) {
        return result.data;
    }

    throw new Error(result.errorMessage ?? "Error fetching config");
}, RockDateTime.now().addMinutes(10));

Now you can call fetchConfig all you want within that 10 minute (note param on the last line specifying expiration of 10 minutes) window and it will only fetch from the API once. Then it will allow you to fetch from the server once again after that, caching those results for 10 minutes again.