Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Create an Observable-Based Fetch Wrapper Using Ramda & Most

    Josh BurgessJosh Burgess

    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.

    mostMost.js
    ramdaRamda
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss