fetch-yo-mama

library0.3.0-rc.2jsnpmunverified

React hooks for Fetch API with automatic request cancellation on unmount. v0.3.0-rc.2, TypeScript, peer dependency react >= 16.8. Provides useGet, usePost, usePut, usePatch, useDelete hooks with alias-based configuration and built-in loading/error state management. Differentiated by automatic abort, configurable base URLs, and simple API.

testing

npm install fetch-yo-mama

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FETCH-YO-MAMA

fetch-yo-mama

testingjavascriptv0.3.0-rc.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FetchProvider

✓ import { FetchProvider } from 'fetch-yo-mama'

✗ const { FetchProvider } = require('fetch-yo-mama')

ESM-only; do not use require()

useGet

✓ import { useGet } from 'fetch-yo-mama'

✗ import useGet from 'fetch-yo-mama'

Named export, not default

usePost

✓ import { usePost } from 'fetch-yo-mama'

✗ import { usePost } from 'fetch-yo-mama/usePost'

All hooks are top-level exports

useDelete

✓ import { useDelete } from 'fetch-yo-mama'

usePatch

✓ import { usePatch } from 'fetch-yo-mama'

usePut

✓ import { usePut } from 'fetch-yo-mama'

Basic setup with FetchProvider and useGet hook fetching from JSONPlaceholder.

import React from 'react'; import { FetchProvider, useGet } from 'fetch-yo-mama'; function App() { return ( <FetchProvider aliases={{ default: { baseUrl: 'https://jsonplaceholder.typicode.com', headers: { 'Content-Type': 'application/json' }, }, }} > <UserList /> </FetchProvider> ); } function UserList() { const [usersRequest, fetchUsers, abortControllerRef, clearState] = useGet('/users'); if (usersRequest.loading) return Loading...; if (usersRequest.error) return Error Loading Data; return ( <> {usersRequest.response?.map((u) => ( {u.name} ))} </> ); } export default App;

Debug

Known issues

breakingVersion 0.2.x to 0.3.0-rc.2 changes internal API: useGet now returns [state, fetch, abortRef, clearState] instead of a single object.

fix

Update component to destructure return value as array of four elements.

affects: >=0.3.0-rc.1

breakingHooks no longer accept inline fetch params directly; params must be passed as the second argument to useGet/usePost/etc.

fix

Move options object to second parameter: useGet('/url', { params: {} }).

affects: >=0.3.0-rc.1

deprecatedThe 'clearState' function is currently optional and may be removed in future versions.

fix

If you use clearState, plan to manage state manually or await a replacement.

affects: >=0.3.0-rc.1

gotchaFetchProvider must be an ancestor of any component using hooks. Missing provider will cause hooks to throw.

fix

Wrap your app with <FetchProvider>.

affects: >=0.1.0

gotchaMultiple FetchProviders nesting may cause unexpected behavior; only the innermost provider's aliases are used.

fix

Use a single FetchProvider at the root level.

affects: >=0.1.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot destructure property 'loading' of 'usersRequest' as it is undefined.

Calling useGet without wrapping in FetchProvider results in undefined state.

fix

Wrap your component tree with <FetchProvider> and ensure aliases are defined.

Warning: React has detected a change in the order of Hooks called by Component.

Destructuring the return of useGet incorrectly or conditionally calling hooks.

fix

Always call hooks at the top level and destructure exactly [state, fetch, abortRef, clearState].

TypeError: fetch is not a function

Using useGet without arguments or passing a non-string URL.

fix

Provide a string URL as the first argument: useGet('/users').

Error: No alias found for 'default'

FetchProvider was given aliases without a 'default' entry, or the provider is missing.

fix

Add a 'default' alias in FetchProvider aliases object.

Upgrade

Version history

0.3.0-rc.2latest on npm

Audit

Dependencies

reactrequiredpeer dependency for hooks

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/alexandrius/fetch-yo-mama ↗

packagefetch-yo-mama ↗

homepagehttps://github.com/alexandrius/fetch-yo-mama#readme ↗