fetch-wrapper

Wrapper around isomorphic-fetch for resending fetch request if there is an error.

Getting Started

• Installation
• Request Wrapper
• Request Creator Helpers
• Example Usage
• Credits

Installation

$ npm i fetch-wrapper --save

To run the tests first clone the repo:

$ git clone https://github.com/nikhilaravi/fetch-wrapper.git

Run the tests:

$ npm test

Request wrapper

The sendRequest function retries the fetch request if there is an error.

| Param | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | options | {} |object | REQUIRED: Object specifying the request, onSuccess and onError functions. See below | | retryIntervals | [1000] |array of numbers | OPTIONAL: Time intervals at which to retry the fetch request | | attempt | 0 |number | Do not need to specify |

options object

| Key | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | request |function | function returns a fetch request. Can be created using the create-request helpers (see create-request.js) | | responseType | enum (text,json) | Format of the response. Used to parse the response body using either 'response.text' or 'response.json' methods | | onSuccess(response) |function | function to be called with the response when the fetch request returns successfully | | onError(response) |function | function to be called when there is an error in the fetch request |

options.onError will only be called if there is an:

• error in the fetch request
• error in options.onSuccess function (e.g. redux error)

The error object passed to onError is of the form

{
  status: '', //either a status code or 'error'
  message: ''
}

options.onSuccess will be called on

• successful requests
• network errors e.g. 404/500

The response passed to onSuccess is either the response data (json/text) or in the case of a network/server/parsing error, an error object of the form

{
  status: '', //'error'
  message: '' // e.g. 'Invalid Response Type' or 'No response body'
}

Request Creator Helpers

Helper functions that return a function that send a fetch request The promise returned by fetch is then resolved inside the sendRequest function.

Options available for sending get, post and put requests with and without authentication.

The parameters for each helper are outline below in the order they need to be specified.

getReq

| Param | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | url | undefined |string | url of the request | | header | {} |object | Optional header options |

postReq

| Param | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | url | undefined |string | url of the request | | data | null |object | request body which will be stringified | | header | {} |object | Optional header options |

putReq

| Param | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | url | undefined |string | url of the request | | data | null |object | request body which will be stringified | | header | {} |object | Optional header options |

getAuthReq

| Param | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | url | undefined |string | url of the request | | token | undefined |string | Authentication token which will be set to the 'Authorization' key in the request header object | | header | {} |object | Optional further header options |

postAuthReq

| Param | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | url | undefined |string | url of the request | | data | null |object | request body which will be stringified | | token | undefined |string | Authentication token which will be set to the 'Authorization' key in the request header object | | header | {} |object | Optional further header options |

putAuthReq

| Param | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | url | undefined |string | url of the request | | data | null |object | request body which will be stringified | | token | undefined |string | Authentication token which will be set to the 'Authorization' key in the request header object | | header | {} |object | Optional further header options |

Example usage

import { postReq, sendRequest } from 'fetch-wrapper'

sendRequest({
  request: postReq('http://localhost:9009/login', {name: 'name'}), //this should be a function that returns a fetch request
  responseType: 'json'
  onSuccess: json => { //on success code here },
  onError: error => { //on error code here }
})

Credits

Collaborators: @besartshyti