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 [usersRequest, fetchUsers, abortControllerRef, clearState] = useGet('/users');

   if (usersRequest.loading) return <p>Loading...</p>;
   if (usersRequest.error) return <p>Error Loading Data</p>;
   return (
      <>
         {usersRequest.response.map((u) => (
            <p>{u.name}</p>
         ))}
      </>
   );
}

Customize request

const [requestState, request, abortControllerRef] = useGet('/custom', {
   alias: '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:

• [x] Rewrite to TypeScript
• [ ] Image upload progress
• [ ] Change name
• [ ] Docs