use-fetch-lib v2.2.3

use-fetch-lib 🔥

A simple React Hook that make rest api call easier\ Api calls without Promise or async/ await

Note: This is using the new React Hooks API

Install

$ npm i use-fetch-lib --save
$ yarn add use-fetch-lib

✨ It features:

• Simple and Lightweight
• TypeScript ready
• Support Data Mocking
• SSR support
• Request Cancellation on component unmount
• Request Caching (In-Memory cache)
• Local/Cache state mutation (update your data as you want)

How to use

https://github.com/kiranbhalerao123/use-fetch-lib-example

use-fetch-lib exposes two named exports to us,

• UseFetchProvider
• useFetch

1️⃣ UseFetchProvider

• UseFetchProvider is just a React component that help the useFetch to configure it properly.
• Just wrap your parent component with UseFetchProvider
• pass it, baseUrl(string) and authorizationToken(string|Function)

<UseFetchProvider
  baseUrl="http://dummy.restapiexample.com"
  authorizationToken={useSelector((store: any) => store.token)}
>
  <App />
</UseFetchProvider>

2️⃣ useFetch

const [{ data, status }, recall, updateState] = useFetch({
  url: "/api/v1/employee/1",
  method: "get",
  shouldDispatch: true
});

alternate syntax ♦️
const [{ data, status }, recall] = useFetch("/api/v1/employee/1"); // note: Default value of `shouldDispatch` is false

• This will get called on componentDidMount as we pass shouldDispatch true
• it returns an array that we destruct as {data, status}, recall
• data is an object return from Your api call
• status active status of your api call, can be destruct as {isFulfilled, isPending, isRejected, isMocked, isCached, err}
• recall it is a function to recall your api as you want
• updateState is a function to update fetch state locally, it take callback function with preData as its arg.
  • ex. updateState((preData)=> updatedData)
• Cache
  • You can cache your api req. by providing cache: true

  const [{ data: Posts, status }] = useFetch({
    url: "/posts",
    method: "get",
    cache: true,
  });

• Typescript

  • we can pass generic types to useFetch

    const [{ data: Posts, status: { isFulfilled } }, postTodoService] = useFetch<IPostData, IPostTodo>({
      url: "/posts",
      method: "post"
    });

• useFetch Params 👇