Adapter Design Pattern

The adapter design pattern is a structural design pattern that acts as a bridge between two incompatible interfaces.

Let us discuss an example to understand the above detail. We will have a system to use an existing API without modifying it by converting the output into desirable format.

When to use the adapter pattern ?

• Integrating with third-party API - If the API returns output in an incompatible format, the adapter converts it and makes the output compatible with the requirements.

• Working with legacy systems - Adapter converts the old code to fit new system requirements. Example: Convert XML output to JSON objects.

• When avoiding changes to existing code → Modifies data externally without altering original API implementations.

• When different modules communicate differently → Helps in handling format mismatches between modules.

Benefits of the Adapter Pattern

• The main application is not tied to the API response formats. Thus decoupling dependencies is one important benefit.

• The adapter patten can be reused for different APIs with similar mismatches. This enhances reusability.

• Adapter pattern enhances flexibility by allowing us to change APIs without affecting the application.

• The entire system does not change when the adapter changes which improves maintainability.

Sample Problem

Using typescript let us tackle the below scenario:

We make a web api call to fetch user location data. The API returns the output :

• latitude and longitude as strings

• timestamp as a unix timestamp

• firstName and lastName separately

  The final goal is to convert API data into a user-friendly format:

• latitude and longitude are numbers.

• date should be in "DD-MM-YYYY" format

• fullName should be a single string

Step 1 : Define API response and expected format

interface APIResponse {
  latitude: string;  // e.g., "12.34567"
  longitude: string; // e.g., "98.76543"
  timestamp: number; // e.g., 1709856000 (Unix timestamp)
  firstName: string;
  lastName: string;
}

Step 2: Target Result for the requirement

interface UserDisplayData {
  lat: number;
  lng: number;
  date: string; // DD-MM-YYYY format
  fullName: string;
}

Step 3: Implement the Adapter

The adapter transforms API data into the required format. The convert() method in the below code snippet does the required transformation. We use the formatDate() function to change the timestamp into our date format.

import fetch from "node-fetch";

interface APIResponse {
  latitude: string; // e.g., "12.34567"
  longitude: string; // e.g., "98.76543"
  timestamp: number; // e.g., 1709856000 (Unix timestamp)
  firstName: string;
  lastName: string;
}

interface UserDisplayData {
  lat: number;
  lng: number;
  date: string; // DD-MM-YYYY format
  fullName: string;
}

class APIToUserAdapter {
  static convert(apiResponse: APIResponse): UserDisplayData {
    return {
      lat: parseFloat(apiResponse.latitude), //convert string to number
      lng: parseFloat(apiResponse.longitude), //convert string to number
      date: this.formatDate(apiResponse.timestamp), // Convert timestamp to "DD-MM-YYYY"
      fullName: `${apiResponse.firstName} ${apiResponse.lastName}`, // Combine first and last name
    };
  }

  // Helper function to format the date
  private static formatDate(timestamp: number): string {
    const date = new Date(timestamp * 1000); // Convert Unix timestamp to milliseconds
    const day = String(date.getDate()).padStart(2, "0");
    const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are 0-based
    const year = date.getFullYear();
    return `${day}-${month}-${year}`;
  }
}

const fetchUserLocation = async (): Promise<UserDisplayData> => {
  try {
    const response = await fetch("http://xyz-location.com/user-locations"); // API call

    const apiData = (await response.json()) as APIResponse; //parse the json response

    //use the adapter to convert API response
    const userData = APIToUserAdapter.convert(apiData);
    return userData;
  } catch (error) {
    console.error("error fetching location", error);
    throw new Error("Failed to fetch data");
  }
};

async function main() {
  fetchUserLocation().then((userData) => console.log(userData));
}

main();

The method fetchUserLocation() is based on the async/await concept which “Promises” an object of type“UserDisplayData”.

IMPORTANT NOTE

The Promise is a Javascript function. the fetch() method calls the API and”awaits” the response. We expect the apiData as the response according to the interface. We call the “convert” method that produces the result in expected format.

async/await is a feature in JavaScript that makes it easier to work with asynchronous (non-blocking) code, especially when dealing with promises.

The await keyword is used inside an async function to pause execution until a Promise is resolved.

We have used a “fake” api. You will see the catch-block in action and a “crash”.

Please use your api and change the two interfaces accordingly to test the adapter pattern.

Compile the GITHUB code to understand better.