Introduction

• useFetch is an awesome fetch manager.
• You can easily send all requests by this.
• There is also predefined usePost, useGet, useDelete and usePut hooks

const {
    request,
    response,
    fetching,
    firstTimeFetched,
    fetched 
} = useFetch();

Getting Started

• You may want to pass onSuccess and onError functions to FetchProvider to send notifications or listen responses from any requests that sent from useFetch.
• You can set your rest server url for default url in useFetch.
• You can always send a request to different url with url parameter in useFetch.
• You can set transformResponse function on FetchProvider if you want to modify any data for a reason before onSuccess or onError
• onError function is triggered when a fetch request fell into catch block. Otherwise useFetch and other predefined hooks will call onSuccess functions. If any success response means failure for you, you can check that by setting isSuccess function on FetchProvider. Also you can set isError function too.
• FetchProvider has default getAuthorizationHeader props that uses Bearer authorization header. If you use another authorization method you can pass

    <FetchProvider getAuthorizationHeader={ ( token: string ) => false} />

• You need to import useFetch and FetchProvider.

From Collection

import { useFetch, FetchProvider } from "@reactivers/hooks";

From Package

import { useFetch, FetchProvider } from "@reactivers/use-fetch";

Also

• There is 4 predefined hooks that use useFetch.
• You can use them for a quick usage.

 import {
    useGet,
    usePost,
    usePut,
    useDelete
} from '@reactivers/hooks'

Interfaces

Provider

interface FetchContextProps {

	//Sets default url for useFetch hook
	url?: string;
	
    credentials?: RequestCredentials;

    token?: string;

	//Calls on every useFetch success.
	onSuccess?: (response: any) =>  void;

	//Calls on every useFetch error.
	onError?: (error: any) =>  void;

	//Calls on every useFetch request.
    // You can find RequestPayload interface at hook's interface
	onRequest?: (response: RequestPayload) => void;

    // Transforms response before send it to onSuccess or onError
    transformResponse?: (response: any) => any;

    // You can use this method to decide if the response is really success
    isSuccess?: (response: any) => boolean;

    // You can use this method to decide if the response is really failure
    isError?: (response: any) => boolean;

    // You can use this method to get custom authorization header
    getAuthorizationHeader?: (token: string) => string; // Default = (token) => token ? `Bearer ${token}` : ""

}

Hook

export declare type ResponseContentType = "JSON" | "BLOB" | "FORM-DATA" | "TEXT" | "ARRAY-BUFFER" | "RAW"

export interface GenericRequestPayload extends RequestInit {
	
	//If passed null hook uses provider's url props
    url?: string;

	//Appends to url
    endpoint?: string;

	//Calls every success request
    onSuccess?: (respose: any) => void;

	//Calls every failure request
    onError?: (responseJSON: any, response: any) => void;

    //For parsing response
    //If sets RAW it returns promise
    responseContentType?: ResponseContentType // Default = JSON
}

interface RequestPayload extends GenericRequestPayload {

	//Parameters for request. If passed.
    body?: any;

	//If sets false it sends the body parameter as raw. Otherwise JSON.parse will be applied
    bodyStringify?: any; // Default = True
}

interface FetchController<T extends {}> {
	
	//Returns True after first request
    firstTimeFetched: boolean;

	//Returns status of request.
	// Even if the request failed this returns True
    fetched: boolean;

	//Returns if the request is not finished
    fetching: boolean;

	//Returns status of last request
    success: boolean;

	//Returns response of request. 
	//You can pass interface of response to use benefits of TS.
    response: T | any;
}

interface IUseFetchProps {
	//If sets True aborts when component unmounted
    abortOnUnmount?: boolean // Default = True
}

interface IUseFetchResponse<T extends {}> extends FetchController<T> {
	// Runs fetch process
	// Sets fetched = false, fetching = true
    request: (params: RequestPayload) => Promise<Response>;
}

Example

Run Example