19.4.5 Integrating with the Backend API

Seamlessly Connect Your Frontend to the Backend

Integrating the frontend application with a backend RESTful API is a crucial step in building a full-stack application. This section focuses on connecting your ClojureScript frontend to the backend using libraries such as cljs-ajax and the native Fetch API. Mastering this interaction allows your application to retrieve, process, and display dynamic data from the server.

Making HTTP Requests

ClojureScript provides several ways to make HTTP requests. Two popular methods are using cljs-ajax, a ClojureScript wrapper for AJAX requests, and the browser’s native Fetch API. Here’s a brief overview of both:

Using cljs-ajax

cljs-ajax is a feature-rich library that simplifies AJAX requests in ClojureScript. It offers an idiomatic interface for making API calls. Here’s an example of how to make a GET request:

(ns my-app.api
  (:require [ajax.core :refer [GET POST]]))

(defn fetch-user-data [user-id]
  (GET (str "/api/user/" user-id)
    {:handler (fn [response] (println "Success:" response))
     :error-handler (fn [error] (println "Error:" error))
     :response-format :json}))

Using Fetch API

The Fetch API is a modern, promise-based interface for making HTTP requests available in browsers. Below is an example in ClojureScript using js/fetch:

(defn fetch-user-data [user-id]
  (.then (js/fetch (str "/api/user/" user-id))
         (fn [response] (.json response))
         (fn [data] (println "Success:" data))
         (fn [error] (println "Error:" error))))

Handling Asynchronous Data

When integrating with APIs, it’s essential to handle asynchronous data effectively. You need to ensure your application remains responsive while waiting for data to arrive. Using promises or core.async channels can help manage these asynchronous workflows.

Updating the UI in Response to API Calls

Once you receive the data from the API, update the UI accordingly. Leverage frameworks like Reagent or Rum to efficiently render UI changes based on the new data. Here’s a Reagent example:

(ns my-app.core
  (:require [reagent.core :as r]))

(defn user-component []
  (let [user (r/atom nil)]
    (fetch-user-data 123)
    (fn []
      [:div
       [:h2 "User Details"]
       [:div (if @user
               (str "User Name: " (:name @user))
               "Loading...")]])))

Error Handling

Robust error handling ensures that your application can gracefully manage API failures. Log errors, display user-friendly messages, and implement retry mechanisms if necessary.

(defn error-handler [error]
  (println "An error occurred:" error)
  ;; More complex error handling logic here
)

(GET "/api/foo"
  {:handler success-handler
   :error-handler error-handler})

Conclusion

Integrating with a backend API opens the gateway to dynamic applications that interact with real-world data. By mastering libraries such as cljs-ajax or the Fetch API, managing asynchronous requests, and handling UI updates, you’ll be equipped to build responsive full-stack applications.