fetch-yo-mama

Fetch API QoL hooks for React.

The request will be automatically aborted if the component is unmounted

logo

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

GitHub

View Github