{"id":48237,"library":"js-fetch-api","title":"js-fetch-api","description":"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.","status":"active","version":"1.3.5","language":"javascript","source_language":"en","source_url":"https://github.com/navikt/fetch-api","tags":["javascript","typescript"],"install":[{"cmd":"npm install js-fetch-api","lang":"bash","label":"npm"},{"cmd":"yarn add js-fetch-api","lang":"bash","label":"yarn"},{"cmd":"pnpm add js-fetch-api","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for dispatching asynchronous actions (request, success, failure).","package":"redux-thunk","optional":false},{"reason":"Required for type definitions and action dispatching.","package":"redux","optional":false}],"imports":[{"note":"CommonJS require works but named imports are preferred.","wrong":"const call = require('js-fetch-api').call","symbol":"call","correct":"import { call } from 'js-fetch-api'"},{"note":"ActionWithPayload is a named export, not default. TypeScript users should import type: import type { ActionWithPayload } from 'js-fetch-api'","wrong":"import ActionWithPayload from 'js-fetch-api'","symbol":"ActionWithPayload","correct":"import { ActionWithPayload } from 'js-fetch-api'"},{"note":"ThunkResult is a named type export.","wrong":"","symbol":"ThunkResult","correct":"import { ThunkResult } from 'js-fetch-api'"},{"note":"Default export is the module itself, but typical usage is to import named exports. Avoid importing default if you need individual functions.","wrong":"import { default } from 'js-fetch-api'","symbol":"default","correct":"import fetchApi from 'js-fetch-api'"}],"quickstart":{"code":"// actions/person.ts\nimport { call, ActionWithPayload, ThunkResult } from 'js-fetch-api';\nimport { ActionCreator } from 'redux';\n\ninterface PersonPDL {\n  personname: string;\n  username: string;\n}\n\nexport const getPersonInfo: ActionCreator<ThunkResult<ActionWithPayload<PersonPDL>>> = (\n  id: string\n): ThunkResult<ActionWithPayload<PersonPDL>> => {\n  return call({\n    url: '/api/person/' + id,\n    expectedPayload: {\n      personname: 'Demo Demo',\n      username: 'demo',\n    },\n    expectedErrorRate: {\n      200: 0.8,\n      401: 0.1,\n      500: 0.1,\n    },\n    maxDelayTime: 2000,\n    responseType: 'json',\n    cascadeFailureError: true,\n    type: {\n      request: 'PERSONINFO/REQUEST',\n      success: 'PERSONINFO/SUCCESS',\n      failure: 'PERSONINFO/FAILURE',\n    },\n  });\n};\n\n// In your component, dispatch like: dispatch(getPersonInfo('123'));","lang":"typescript","description":"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."},"warnings":[{"fix":"Ensure that expectedErrorRate is not used in production code; it's safe to leave them as they are ignored in production.","message":"call() options merges production and development settings; expectedErrorRate and maxDelayTime are only used in development, not production.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Override or disable by not relying on it, or consider using a different fetch wrapper if CSRF cookie behavior is undesirable.","message":"The package always adds a NAV_CSRF_PROTECTION cookie; this may conflict with existing CSRF protection mechanisms.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set cascadeFailureError: true to ensure failure actions are always dispatched for server errors.","message":"cascadeFailureError: 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider using Redux Toolkit's createAsyncThunk instead of this package.","message":"The package does not seem actively maintained (last update 2019). Redux Thunk integration may not work seamlessly with newer Redux Toolkit patterns.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Always provide type: { request: 'SOME/REQUEST', success: 'SOME/SUCCESS', failure: 'SOME/FAILURE' } in every call() invocation.","message":"The type property in call options is required and must be an object with request, success, and failure action type strings.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.3.5':21 '3xx':46 '401':51 '4xx':49 '5xx':55 'action':18,40 'also':70 'api':4,14 'automat':36 'browser':85 'cach':86 'capabl':107 'client':47 'configur':62 'cooki':75 'csrf':73,77 'definit':90 'delay':67 'develop':57,105 'differenti':91 'dispatch':19,37 'error':24,48,54 'fetch':3,7,13,94,97 'handl':43 'header':30 'includ':28 'integr':103 'javascript':108 'js':2 'js-fetch-api':1 'json':27 'messag':34 'mock':60 'nativ':12 'nav':76 'packag':69 'paramet':82 'plain':93 'prevent':84 'protect':74,78 'provid':22 'rate':64 'react':6 'redirect':45 'redux':16,39,101 'request/success/failure':38 'respons':25 'server':53 'set':71 'ship':87 'simul':66,106 'special':42 'stack':31 'status':29 'structur':23 'success/error':63 'support':59 'thunk':17,102 'tight':100 'timestamp':81 'trace':32 'type':89 'typescript':88,109 'unauthor':50 'util':8 'version':20 'wrap':10 'wrapper':98","created_at":"2026-06-07T16:55:36.055063+00:00","updated_at":"2026-06-07T16:55:36.055063+00:00","problems":[{"fix":"Ensure call() is called with an object parameter that includes url and type.","cause":"call() invoked without a config object, or config is undefined.","error":"TypeError: Cannot destructure property 'url' of 'config' as it is undefined."},{"fix":"Make sure the action creator returns call({...}) directly, and the return type is ThunkResult<ActionWithPayload<...>>.","cause":"call() might not be called correctly or the action creator does not return the result of call().","error":"Expected a thunk result but got undefined when dispatching action."},{"fix":"Remove expectedErrorRate in production code to avoid confusion, though it's harmless.","cause":"expectedErrorRate is meant for development only; this warning (if any) might mislead users.","error":"Warning: You are passing expectedErrorRate but the package is in production and this option is ignored."},{"fix":"Add applyMiddleware(thunk) to your store creation.","cause":"call() requires Redux Thunk middleware to be applied in the store.","error":"Redux 'dispatch' is not a function when using call() without Redux thunk middleware."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"http://.","github":"https://github.com/navikt/fetch-api","docs":null,"changelog":null,"pypi":null,"npm":"js-fetch-api","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}