use-api-client
v0.0.1-alpha.1
Published
use-api-client is a custom React hook factory designed to create hooks for performing API calls with extensive configuration options. It leverages axios for HTTP requests and provides features like caching, retrying on failure, polling, progress tracking,
Downloads
1
Readme
use-api-client
use-api-client is a custom React hook factory designed to create hooks for performing API calls with extensive configuration options. It leverages axios for HTTP requests and provides features like caching, retrying on failure, polling, progress tracking, and custom logging.
Features
- Configurable Base URL: Set a base URL for all API calls.
- Interceptors: Add custom request and response interceptors.
- Caching: Cache API responses with a configurable TTL (Time To Live).
- Retry Mechanism: Automatically retry failed requests.
- Polling: Continuously poll an endpoint at a specified interval.
- Progress Tracking: Track the progress of upload and download requests.
- Custom Logging: Implement custom logging logic.
Installation
To use use-api-client
in your project, you need to have axios
and react
installed as they are peer dependencies.
npm install axios react
Usage
To create an API client, call the useApiClientFactory with your configuration preferences.
mport useApiClientFactory from 'use-api-client';
const apiClient = useApiClientFactory({
baseUrl: 'https://api.example.com',
// ...other preferences
});
You can then use the returned apiClient
hook in your components to make API calls.
const MyComponent = () => {
const apiCall = apiClient({
path: "/data",
method: "GET",
// ...other API call options
});
// Destructure the properties you need
const { response, loading, error, fetch } = apiCall;
// Fetch data on component mount
useEffect(() => {
fetch();
}, [fetch]);
// Render your component based on the API call state
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>{JSON.stringify(response)}</div>;
};
Configuration
The useApiClientFactory accepts an IClientConfig object with the following options:
- baseUrl: The base URL for the API.
- onException: Callback for handling exceptions.
- defaultHeaders: Default headers for API requests.
- defaultQueryParams: Default query parameters for API requests.
- logging: Configuration for logging.
- retry: Configuration for retrying failed requests.
- progress: Configuration for tracking progress of requests.
- interceptors: Custom axios interceptors.
The apiClient
hook returned by the factory accepts an IApiCall object with options such as path, method, body, headers, queryParams, refresh, ttl, and config.
Testing
The package includes tests written with @testing-library/react-hooks
. To run the tests, execute:
npm test
Building
To build the package, run:
npm run build
This will transpile the TypeScript source code to JavaScript using Babel and output it to the dist directory.
Continuous Integration
The .github/workflows/ci.yaml file defines a GitHub Actions workflow for continuous integration, which installs dependencies, sets up Node.js, and runs tests on push events.
Contributing
Contributions are welcome. Please follow the existing code style and add tests for any new features or fixes.
License
use-api-client is open-sourced software licensed under the MIT license.