@tiger-analytics/utils

Overview

@tiger-analytics/utils is a module designed to enhance the developer experience by providing common reusable functions, saving developer time and reducing code repetition across your projects.

Features

1. fetchApi
   • Key Features
   • Benefits
   • Setup
   • Usage
   • Overwrite the default error handlers for specific cases
     • Skip error handling
     • Execute custom error handler
     • Execute the default error handler if the custom handler fails
2. Hooks
   • useLoader

fetchApi

fetchApi is a robust wrapper around the native fetch function that simplifies error handling and improves the overall API interaction process.

Key Features

• Centralized Error Handling: Configure 401 handler and other error responses for a wide range of HTTP status codes (e.g., 401, 403, etc) in one place. This saves time and ensures consistency across your application.
• Customizable Error Handlers: Overwrite or partially overwrite the default error handlers for specific cases. For instance, when checking if a username exists, a 404 error can be handled differently to indicate that the absence of a username is expected.
• Aborted Requests: Automatically abort API requests when the user navigates to a different page, preventing irrelevant notifications from appearing in the new context.

Benefits

• Time-Saving: Avoid the repetitive task of writing error handling code for each API call. This is especially useful in larger projects where maintaining consistency can be challenging.
• Reduced Code Duplication: Keep your codebase clean and maintainable by centralizing error handling logic.

Note: Support for handling parallel multiple API error cases will be added in future!

Setup

1. Create a provider component for fetch api and provide the props:
   • updateErrorNotification: Callback function to handle error and error description. You could use this to update global store to display centralized error.
   • cleanupErrorNotification: Call back function to cleanup error messages (from central store). You can pass () => {} if this task is not required.
   • handle401Response: Callback function to define what happens when an api returns 401. Ideally, we should navigate the user to login page.

Working example: https://github.com/abhishek-kumar2-TA/ta-template/blob/main/src/store/FetchContextProviderComponent.tsx

Usage

useFetchApi provides 'defaultFetch' which you need to use to make the api calls.

const { defaultFetch } = useFetchApi();

The difference in syntax is very small in terms of usability. For ex:

| | fetch | defaultFetch (fetchApi) | | --- | ------------------------------------- | --------------------------------------------------- | | Get | fetch('https://api.example.com/data') | defaultFetch({url: 'https://api.example.com/data'}) | |GET with Request config | fetch( 'https://api.example.com/data', { headers: { 'Content-Type': 'text/plain' } }) | defaultFetch({ url: 'https://api.example.com/data', fetchRequestInit: { headers: { 'Content-Type': 'text/plain' } }})| |POST | fetch( 'https://api.example.com/data', method: 'POST', { headers: { 'Content-Type': 'application/json' } }, body: JSON.stringify({ name: 'John Doe' }) ) | defaultFetch({ url: 'https://api.example.com/data', fetchRequestInit: { method: 'POST', { headers: { 'Content-Type': 'application/json' } }, body: JSON.stringify({ name: 'John Doe' }) }})|

Overwrite the default error handlers for specific cases

Skip error handling

Execute custom error handler

Execute the default error handler if the custom handler fails

Add return {} at the end of errorHandler. This will inform fetchApi to execute default error handler if custom error handler did not handled the current error status.

Hooks

useLoader

useLoader is a custom hook designed to manage loading states more effectively during API calls.

Key Features:

• Threshold Loading Time: Ensures the loading state is true for a minimum threshold duration (default: 400ms). This prevents flickering when API calls return quickly.
• Enhanced User Experience: Provides a more polished user experience by displaying a loader overlay consistently, improving accessibility and reducing abrupt visual changes.

Benefits:

• Improved Accessibility: By maintaining the loading state for a minimum time, users are better informed about ongoing processes, making the application more user-friendly.