js-fetch-api

library1.3.5jsnpmunverified

A React fetch utility that wraps the native fetch API with Redux Thunk action dispatching. Version 1.3.5 provides structured error responses as JSON including status, headers, stack trace, and messages. It automatically dispatches request/success/failure Redux actions, with special handling for redirects (3xx), client errors (4xx), unauthorized (401), and server errors (5xx). For development, it supports mocking with configurable success/error rates and simulated delays. The package also sets a CSRF protection cookie (NAV_CSRF_PROTECTION) and a timestamp parameter to prevent browser caching. Ships TypeScript type definitions. Differentiates from plain fetch and other fetch wrappers by tight Redux Thunk integration and development simulation capabilities.

testing devops

npm install js-fetch-api

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · JS-FETCH-API

js-fetch-api

testingjavascriptv1.3.5

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.

call

✓ import { call } from 'js-fetch-api'

✗ const call = require('js-fetch-api').call

CommonJS require works but named imports are preferred.

ActionWithPayload

✓ import { ActionWithPayload } from 'js-fetch-api'

✗ import ActionWithPayload from 'js-fetch-api'

ActionWithPayload is a named export, not default. TypeScript users should import type: import type { ActionWithPayload } from 'js-fetch-api'

ThunkResult

✓ import { ThunkResult } from 'js-fetch-api'

ThunkResult is a named type export.

default

✓ import fetchApi from 'js-fetch-api'

✗ import { default } from 'js-fetch-api'

Default export is the module itself, but typical usage is to import named exports. Avoid importing default if you need individual functions.

Demonstrates defining a Redux Thunk action creator using the call() function from js-fetch-api, including mock configuration with expected payload and error rates for development.

// actions/person.ts import { call, ActionWithPayload, ThunkResult } from 'js-fetch-api'; import { ActionCreator } from 'redux'; interface PersonPDL { personname: string; username: string; } export const getPersonInfo: ActionCreator<ThunkResult<ActionWithPayload<PersonPDL>>> = ( id: string ): ThunkResult<ActionWithPayload<PersonPDL>> => { return call({ url: '/api/person/' + id, expectedPayload: { personname: 'Demo Demo', username: 'demo', }, expectedErrorRate: { 200: 0.8, 401: 0.1, 500: 0.1, }, maxDelayTime: 2000, responseType: 'json', cascadeFailureError: true, type: { request: 'PERSONINFO/REQUEST', success: 'PERSONINFO/SUCCESS', failure: 'PERSONINFO/FAILURE', }, }); }; // In your component, dispatch like: dispatch(getPersonInfo('123'));

Debug

Known issues

gotchacall() options merges production and development settings; expectedErrorRate and maxDelayTime are only used in development, not production.

fix

Ensure that expectedErrorRate is not used in production code; it's safe to leave them as they are ignored in production.

affects: >=1.0.0

gotchaThe package always adds a NAV_CSRF_PROTECTION cookie; this may conflict with existing CSRF protection mechanisms.

fix

Override or disable by not relying on it, or consider using a different fetch wrapper if CSRF cookie behavior is undesirable.

affects: >=1.0.0

gotchacascadeFailureError: true dispatches failure action even for 5xx errors; if set to false, no failure action is dispatched for 5xx, which may break error handling expectations.

fix

Set cascadeFailureError: true to ensure failure actions are always dispatched for server errors.

affects: >=1.0.0

deprecatedThe package does not seem actively maintained (last update 2019). Redux Thunk integration may not work seamlessly with newer Redux Toolkit patterns.

fix

Consider using Redux Toolkit's createAsyncThunk instead of this package.

affects: >=1.0.0

gotchaThe type property in call options is required and must be an object with request, success, and failure action type strings.

fix

Always provide type: { request: 'SOME/REQUEST', success: 'SOME/SUCCESS', failure: 'SOME/FAILURE' } in every call() invocation.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot destructure property 'url' of 'config' as it is undefined.

call() invoked without a config object, or config is undefined.

fix

Ensure call() is called with an object parameter that includes url and type.

Expected a thunk result but got undefined when dispatching action.

call() might not be called correctly or the action creator does not return the result of call().

fix

Make sure the action creator returns call({...}) directly, and the return type is ThunkResult<ActionWithPayload<...>>.

Warning: You are passing expectedErrorRate but the package is in production and this option is ignored.

expectedErrorRate is meant for development only; this warning (if any) might mislead users.

fix

Remove expectedErrorRate in production code to avoid confusion, though it's harmless.

Redux 'dispatch' is not a function when using call() without Redux thunk middleware.

call() requires Redux Thunk middleware to be applied in the store.

fix

Add applyMiddleware(thunk) to your store creation.

Upgrade

Version history

1.3.5latest on npm

Audit

Dependencies

redux-thunkrequiredRequired for dispatching asynchronous actions (request, success, failure).

reduxrequiredRequired for type definitions and action dispatching.

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/navikt/fetch-api ↗

packagejs-fetch-api ↗

homepagehttp://. ↗