Asynchronous Data Retrieval

Imagine for a second that we’re asked to build the website for the Library of Trinity College in Dublin, one of the most famous libraries in the world. It has about 300 years of history and about 7 million books. Ok, now let’s imagine we have to allow the users to browse this massive collection of books. Yes, all 7 million of them… a simple data file isn’t going to be a great idea here!

A better approach would be to have a dedicated API to retrieve the data about the books and use it to dynamically fetch only the minimum amount of data needed to render a given page. More data will be fetched as the user navigates through the various pages of the website.

Using API to retrieve data

This approach is valid for most web applications, so let’s try to apply the same principle to our demo application. We’ll be using an API with two endpoints:

• /api/authors (to get the list of authors)
• /api/author/:authorId (to get the information for a given author)

For the sake of this demo application, we’ll keep things very simple. We only want to demonstrate how our application is going to change as soon as we introduce asynchronous data fetching, so we’re not going to bother with using a real database to back our API or with introducing more advanced features like pagination, filtering, or search.

Since building such an API server leveraging our existing data file is a rather trivial exercise (one that doesn’t add much value in the context of this chapter), we’re going to skip the walkthrough of the API implementation.

Note: This simple API server runs independently from our back-end server, so it uses another port (or potentially even on another domain). In order to allow the browser to make asynchronous HTTP requests to a different port or domain, we need our API server to support Cross-Origin Resource Sharing (CORS), a mechanism that allows secure cross-origin requests. Thankfully, enabling CORS with Fastify is as easy as installing the fastify-cors plugin.

We’re also going to need an HTTP client that works seamlessly on both the browser and Node.js. A good option is superagent.

Let’s install the new dependencies by using the following command: