-
Notifications
You must be signed in to change notification settings - Fork 0
/
react-fetch.js
55 lines (46 loc) · 1.53 KB
/
react-fetch.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/* eslint-disable */
import {useState, useEffect} from 'react';
// reactFetch has the same api as browser fetch as all paramters are passed directly to fetch function.
async function fetchData(
params,
dataType,
setData,
setLoading,
setLoaded,
setError
) {
try {
// Resetting the state coz if we `refresh` we need to reset the state of the request.
setLoading(true);
setLoaded(false);
setError(null);
const data = await (await fetch(...params))[dataType](); // dataType = 'json' or 'text'
setData(data);
setLoading(false);
setLoaded(true);
} catch (error) {
setError(String(error));
setLoaded(false);
setLoading(false);
}
}
const useFetch = (params, dataType) => {
{
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [loaded, setLoaded] = useState(false);
const [error, setError] = useState(null);
const refreshFn = () =>
fetchData(params, dataType, setData, setLoading, setLoaded, setError);
useEffect(refreshFn, []);
return {data, refreshFn, error, loading, loaded};
}
};
export const reactFetch = (...params) => ({
text: () => useFetch(params, 'text'),
json: () => useFetch(params, 'json'),
});
// Below library is for only class components, and its not maintainer at all.
// https://www.npmjs.com/package/react-fetch
// Below example didn't work very well see its docs for more info, also the documentation is not updated, as first example is not working.
// import {useFetch} from 'react-fetch-hook';