Package Exports
- react-fetch-hook
- react-fetch-hook/index.js
- react-fetch-hook/usePromise
- react-fetch-hook/usePromise.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-fetch-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-fetch-hook
React hook for conveniently use Fetch API.
- Tiny (556 B). Calculated by size-limit
- Both Flow and TypeScript types included
import React from "react";
import useFetch from "react-fetch-hook";
const Component = () => {
const { isLoading, data } = useFetch("https://swapi.co/api/people/1");
return isLoading ? (
<div>Loading...</div>
) : (
<UserProfile {...data} />
);
};
useFetch accepts the same arguments as fetch function.
Installation
Install it with yarn:
yarn add react-fetch-hookOr with npm:
npm i react-fetch-hook --saveUsage
Custom formatter
Default is response => response.json() formatter. You can pass custom formatter:
const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
formatter: (response) => response.text()
});
Error handling
The useFetch hook returns an error field at any fetch exception.
The error field extends Error
and has status and statusText fields equal to Response.
...
const Component = () => {
const { isLoading, data, error } = useFetch("https://swapi.co/api/people/1");
if (error) {
return <div>
<p>Code: ${error.status}</p>
<p>Message: ${error.statusText}</p>
</div>
}
...
};
Multiple requests
Multiple useFetch in the same file/component supported:
const result1 = useFetch("https://swapi.co/api/people/1");
const result2 = useFetch("https://swapi.co/api/people/2");
if (result1.isLoading && result2.isLoading) {
return <div>Loading...</div>;
}
return <div>
<UserProfile {...result1.data} />
<UserProfile {...result2.data} />
</div>Depends
The request will not be called until all elements of depends array be truthy. Example:
const {authToken} = useContext(authTokenContext);
const [someState, setSomeState] = useState(false);
const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
depends: [!!authToken, someState] // don't call request, if haven't authToken OR someState: false
});
See example.
Re-call requests
If any element of depends changed, request will be re-call. For example, you can use react-use-trigger for re-call the request:
import createTrigger from "react-use-trigger";
import useTrigger from "react-use-trigger/useTrigger";
const requestTrigger = createTrigger();
export const Subscriber = () => {
const requestTriggerValue = useTrigger(requestTrigger);
const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
depends: [requestTriggerValue]
});
return <div />;
}
export const Sender = () => {
return <button onClick={() => {
requestTrigger() // re-call request
}}>Send</button>
}usePromise
For custom promised function.
import React from "react";
import usePromise from "react-fetch-hook/usePromise";
import callPromise from "..."
const Component = () => {
const { isLoading, data } = usePromise(() => callPromise(...params), [...params]);
return isLoading ? (
<div>Loading...</div>
) : (
<UserProfile {...data} />
);
};Examples
- Basic - Just fetch data with
useFetch. - Depends - Usage
dependsoption for refresh query. - Pagination - Usage
usePaginationRequestfor infinite scroll implementation.
API
useFetch
Create a hook wrapper for fetch call.
useFetch(
path: RequestInfo,
options?: {
...RequestOptions,
formatter?: Response => Promise
depends?: Array<boolean>
},
specialOptions?: {
formatter?: Response => Promise
depends?: Array<boolean>
}
): TUseFetchResultwhere TUseFetchResult is:
{
data: any,
isLoading: boolean,
error: any
} RequestInfo, RequestOptions is fetch args.
usePromise
usePromise<T, I: $ReadOnlyArray<mixed>>(
callFunction: ?(...args: I) => Promise<T>,
...inputs: I
): TUsePromiseResult<T>where TUsePromiseResult<T> is
type TUsePromiseResult<T> = {
data: ?T,
isLoading: boolean,
error: mixed
}Experimental: usePaginatedRequest
⚠️ Warning: this method is experimental, API can be changed.
Create a paginated request.
usePaginatedRequest = <T>(
request: (params: { limit: number, offset: number }) => Promise<Array<T>>,
limit: number,
...depends: Array<any>
): {
data: Array<T>,
loadMore?: () => mixed,
hasMore: boolean
};