API Integration

API Integration

NeRF-or-Nothing integrates with a backend API to handle various operations such as user authentication, scene creation, and data retrieval. This guide outlines the approach to API integration in the application.

API Call Structure

API calls are centralized in the Fetch directory, with the main functions defined in CommonApiCalls.ts.

Key features:

• Uses the Fetch API for making HTTP requests
• Implements error handling and response parsing
• Provides typed responses using TypeScript interfaces

Key API Functions

1. fetchLogin: Handles user login
2. fetchRegister: Handles user registration
3. fetchChangeUsername: Handles username change
4. fetchChangePassword: Handles password change
5. FetchDeleteAccount: Handles account deletion
6. FetchDeleteScene: Handles a single scene deletion
7. fetchPostVideo: Uploads a video for scene creation
8. fetchSceneMetadata: Retrieves metadata for a scene
9. fetchSceneName: Retries scene name
10. fetchScenethumbnail: Fetches a single image representing the trained scene
11. fetchSceneOutput: Fetches the output data for a scene
12. fetchUserSceneHistory: Retrieves the user's scene history

Authentication

API calls that require authentication use the JWT token stored in the AuthContext. The token is included in the Authorization header of the request.

Example:

const response = await fetch(url, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

Error Handling

API functions include basic error handling:

• HTTP errors are caught and logged
• Error messages are returned to the calling component for display to the user

Retry Mechanism

The application implements a retry mechanism for API calls using the useAuthFetchRetry hook. This hook handles:

• Automatic retries for failed requests
• Authentication token refresh (if implemented in the backend)
• Consistent error handling across API calls

Usage:

const authRetryFetchSceneMetadata = useAuthFetchRetry(fetchSceneMetadata);

// Later in your component
const metadata = await authRetryFetchSceneMetadata(sceneId);

Best Practices

1. Keep API calls centralized in the Fetch directory
2. Use TypeScript interfaces to define API response types
3. Implement consistent error handling across all API calls
4. Use the useAuthFetchRetry hook for authenticated API calls
5. Handle loading states in components making API calls
6. Consider implementing request cancellation for long-running or frequently changing requests

Future Improvements

1. Add request and response interceptors for global error handling and token refresh
2. Implement API request caching for improved performance
3. Consider using OpenAPI/Swagger for API documentation and type generation