Modern Frontend Development's Secret Weapon: Aspida for Simple and Type-safe API Calls

In this article, I'm going to introduce you to Aspida, a fantastic library for making API calls efficient and type-safe in frontend development using TypeScript.

Table of Contents

1. What is Aspida?
2. Benefits of Aspida
3. Installing Aspida
4. Defining API Endpoints
5. Generating HTTP Client Code
6. Using the Generated HTTP Client
7. Conclusion

What is Aspida?

Aspida is a HTTP client generation library for TypeScript, mainly making API calls easier and more secure in frontend development.

Benefits of Aspida

Here are the main features and benefits of Aspida:

1. Type Safety: Aspida is strongly supported by TypeScript, ensuring that the API response matches the expected type. This is useful for knowing the shape of data returned from the API in advance, making it easier to catch errors when unexpected data is returned.
2. Automatic Code Generation: Aspida automatically generates HTTP client code from the definition of API endpoints. This eliminates the need to write API call code manually, ensuring consistency and reliability.
3. Flexibility and Compatibility: Aspida is compatible with various HTTP client libraries such as axios and fetch. This allows you to easily integrate Aspida into existing projects.
4. Development Efficiency: As response type definitions and endpoint generation are automated, developers can focus on implementing APIs and business logic. Also, even if there are changes to the API, you can use Aspida to automatically generate new type definitions and endpoints.

Installing Aspida

To install Aspida, you first need to set up the project. Make sure Node.js and npm are installed. Then, install Aspida by running the following command:

npm install @aspida/node-fetch aspida

Here we use node-fetch as the HTTP client library. If you want to use axios, you can install @aspida/axios instead.

Defining API Endpoints

Aspida generates HTTP client code from the definition of API endpoints. Define the API endpoints in a directory structure like this:

/api
  /users
    index.ts
    /$userId.ts

For example, you can write the following code in index.ts:

// /api/users/index.ts

type Methods = {
  get: {
    resBody: {
      id: number
      name: string
    }[]
  }
  post: {
    reqBody: {
      name: string
    }
    resBody: {
      id: number
    }
  }
}

export default Methods

This defines the GET /users and POST /users endpoints.

Generating HTTP Client Code

Generate the HTTP client code from the defined API endpoints by running the following command:

npx aspida

This generates HTTP client code from all the API endpoint definitions in the /api directory.

Using the Generated HTTP Client

You can use the generated HTTP client to call APIs. For example, you can call the API like this:

import api from '@/api/$api'

const main = async () => {
  const users = await api.users.get()
  console.log(users)

  const newUser = await api.users.post({ body: { name: 'John' } })
  console.log(newUser)
}

main()

Conclusion

By using Aspida, you can make API calls easier and safer. There's no doubt that it will contribute to improving development efficiency and reducing bugs. Try Aspida in your next project and experience the difference it makes!

I hope you found this article helpful! If you have any questions or comments, feel free to leave them below. Happy coding!