fetch-yo-mama
Fetch API QoL hooks for React.
The request will be automatically aborted if the component is unmounted
Usage
Step – 0
Install the library
yarn add fetch-yo-mama
Step – 1
Wrap the app with FetchProvider and pass aliases
.
import { FetchProvider } from 'fetch-yo-mama'; import Root from './src/root'; export default function App() { return ( <FetchProvider aliases={{ default: { baseUrl: 'https://jsonplaceholder.typicode.com', headers: { 'Content-Type': 'application/json' }, }, custom: { baseUrl: 'https://coolapi.com', bodyType: 'formdata' // json|formdata|original. default: json }, }}> <Root /> </FetchProvider> ); }
Step – 2
Use the hook:
import { useGet } from 'fetch-yo-mama'; export default function UserList() { const { error, response: users, request, loading } = useGet('/users'); if (loading) return <p>Loading...</p>; if (error) return <p>Error Loading Data</p>; return ( <> {users.map((u) => ( <p>{u.name}</p> ))} </> ); }
Customize request
const { error, response, request, loading } = useGet('/custom', { fetchAlias: 'custom', params: {}, headers: {}, loadOnMount: false, // Don't fetch on mount ...anyOtherFetchParam, });
Other methods
import { usePost, useDelete, usePatch, usePut } from 'fetch-yo-mama'; export default function Component() { // fetch params const fetchParams = { body: {}, params: {}, headers: {}, ..anyOtherFetchParam }; const { error, response, request, loading, abortControllerRef, // abortControllerRef.current.abort() to manually abort the request } = usePost('/user', { ...fetchParams, }); }
TODO:
- Rewrite to TypeScript