A utility library for simplifying API requests in React applications. Built on top of React Query and Axios, it provides a seamless way to manage API calls and caching with an intuitive context-based setup.
- 🌐 Axios Integration: Customize API calls with ease.
- ⚡ React Query: Automatic caching, refetching, and stale data management.
- 📦 Async Storage Support: Persisted caching for React Native or browser-based environments.
- 🛠️ TypeScript Ready: Fully typed for better developer experience.
npm install react-api-utils # or yarn add react-api-utilsWrap your application with the ApiHelperProvider to set up the context and configuration.
import React from 'react'; import { ApiHelperProvider } from 'react-api-utils'; const App = () => ( <ApiHelperProvider baseURL="https://api.example.com"> <YourApp /> </ApiHelperProvider> ); export default App;Leverage the useApiHelper hook to perform API requests effortlessly.
import { useApiHelper } from 'react-api-utils'; const MyComponent = () => { const { data, isLoading, isError } = useApiHelper({ url: '/endpoint', method: 'GET', queryKey: ['endpoint-data'], }); if (isLoading) return <p>Loading...</p>; if (isError) return <p>Something went wrong!</p>; return <pre>{JSON.stringify(data, null, 2)}</pre>; };| Prop | Type | Default | Description |
|---|---|---|---|
baseURL | string | undefined | Base URL for all Axios requests. |
axiosConfig | AxiosRequestConfig | {} | Custom Axios configuration. |
queryClientConfig | QueryClientConfig | {} | React Query client configuration. |
| Option | Type | Description |
|---|---|---|
url | string | API endpoint to fetch data from. |
method | 'GET' , 'POST' , 'PUT' , 'DELETE' | HTTP method for the request. |
queryKey | Array<string> | Unique key for React Query's cache management. |
Contributions are welcome! Feel free to submit issues or pull requests.