Endpoints

Endpoints let you define and manage named API routes, making your code more organized and reusable. You can register endpoints once and call them by name throughout your app.

What Are Endpoints?

Endpoints are predefined API routes that you can register with Nitro Fetch. They encapsulate the HTTP method, path, and any default configuration, allowing you to make requests using a simple, consistent interface.

Benefits of Using Endpoints

• Centralization: Define all your API routes in one place.
• Reusability: Use the same endpoint across different parts of your application.
• Maintainability: Easily update routes and configurations without changing multiple files.
• Consistency: Ensure that all requests to the same endpoint use the same method and path.

Organizing Endpoints

info

To keep your codebase clean and maintainable, it's a good practice to define all your endpoints in a separate file and then import and register them in your service file.

Step 1: Define Endpoints in a Separate File

Create a file (e.g., endpoints.ts) to define all your endpoints:

// endpoints.ts
import { ApiEndpoint } from 'nitro-fetch';

export const endpoints = {
  getUser: {
    method: 'GET',
    path: '/users/{id}',
    config: { timeout: 2000 }
  } as ApiEndpoint,
  getPosts: {
    method: 'GET',
    path: '/posts'
  } as ApiEndpoint,
  createPost: {
    method: 'POST',
    path: '/posts'
  } as ApiEndpoint
};

Step 2: Import and Register Endpoints in Your Service File

In your service file (e.g., apiService.ts), import the endpoints and register them:

// apiService.ts
import { create } from 'nitro-fetch';
import { endpoints } from './endpoints';

const api = create({
  baseURL: 'https://api.example.com'
});

// Register all endpoints at once
api.registerEndpoints(endpoints);

export default api;

Step 3: Use the Endpoints in Your Application

Now you can use the registered endpoints throughout your application:

import api from './apiService';

// Call an endpoint by name
api.call('getPosts').then(res => console.log(res.data));

// Override data or config at call time
api.call('createPost', { title: 'Hello', body: 'World' }, { headers: { 'X-Auth': 'token' } });

Dynamic Paths

Dynamic paths allow you to include variable values in your endpoint paths. Instead of hardcoding values like user IDs directly in the path, you can use placeholders (like {id}) and then provide the actual values when calling the endpoint.

Example of Dynamic Paths

const userId = 123;
api.call('getUser', undefined, { params: { id: userId } });

In this example, the endpoint getUser is defined with a path like /users/{id}. When you call api.call('getUser', undefined, { params: { id: userId } }), the {id} in the path is replaced with the value of userId (in this case, 123).

---

tip

• Centralize Endpoint Definitions: Keep all endpoint definitions in a single file for easy management.
• Use Descriptive Names: Choose clear, descriptive names for your endpoints to make your code more readable.
• Leverage Dynamic Paths: Use dynamic paths to make your endpoints flexible and reusable.
• Override Configurations When Needed: Use the ability to override configurations at call time to handle special cases without changing the endpoint definition.