Create an Observable-Based Fetch Wrapper Using Ramda & Most
Unlike RxJS, Most does not include an observable-based AJAX helper utility. However, it can be very convenient to have one, because it allows you to use streams to do things like declaratively handling errors & setting up cancellation. In this lesson, we use currying & functional composition to create an Observable-based wrapper around the fetch API with Ramda & Most.
[00:00] First, we need to import compose, curry, and head from Ramda. Then we need to import from promise and observe from Most. Because we're using Node for this lesson, we need to import fetch from Node fetch. Below that, we have an end point for the GitHub API which searches for repos containing the word most.
[00:23] Let's start by writing a functional wrapper for the promise.then method. This will be a curry to function to give us more flexibility, and it will take in two arguments, a function F and [inaudible] which in this case will be a promise. It just returns the result of calling the native.then method on the [inaudible] and passing it function F.
[00:45] Next, let's define a function called two JSON which just takes in the fetch response and returns the result of calling the JSON method on that response. We'll use both of these functions to help define our observable base fetch wrapper. Let's call this wrapper function fetch JSON stream since it will always return a stream of JSON results.
[01:08] We'll use Ramda's compose function to create a functional pipeline which starts by calling fetch and then passes the response to a new function created by calling then with two JSON as its first argument and then passes the resulting JSON to Most from promise function which just converts promises into observables.
[01:28] Now, we're going to use fetch JSON stream to call the GitHub API and make sure everything's working correctly. This API call will probably return a lot of results so let's write a couple of helper functions to log out only the first result.
[01:41] First let's define two items which takes in an object and uses destructuring to return the value for the item's key. Then we'll use functional composition again, this time to compose two items with Ramda's head function which just returns the first item in an array. We'll call this function two first item.
[02:01] We can define a log function called log first item by composing together console.log and two first item. Now, let's use Most observe function. Log first item will be triggered when the JSON results are emitted through the resulting stream of applying fetch JSON stream to the GitHub API URL.
[02:22] Now, let's run the file to see what happens. As expected, it looks like a JSON object has been logged out. If we scroll up, we can see that the first item returned by this query is the official Most JS repo.
[02:42] Now, we have a reusable fetch function which always returns a stream which is nice because it allows us to do things let declaratively handling errors using Most recover with function and setting up automatic cancellation using functions like until and take while.