Clean Fetch
Simple, Unopinionated, Just Working - React Data Fetching Library
Installation
yarn add clean-fetch
Usage
Hook Usage
import {useFetch} from 'clean-fetch'
-
Signature: useFetch<T>(fetchfn, getInitial)
.
-
fetchFn: () => Promise<T> | T
: a function that returns the data or a promise which resolves to the data.
-
getInitial?: () => T | undefined
: an optional function that returns the initial data.
If not provided, the initial data is undefined
.
getInitial()
can return undefined
, getInitial
can be absent, or it can throw an error.
-
Returns {data, error, reload}
where:
- If
data
and error
are both undefined
, it means the data is loading or not yet fetched (initial render).
They are never both not undefined
.
reload
: a function that takes no argument, reloads the data and returns what the function passed to the hook returns.
The reload
function reference never changes, you can safely pass it to the independent array of useEffect
without causing additional renders.
In subsequent renders, reload
uses the latest function passed to the hook.
-
useFetch
: only fetches data in the first return, only if initial data is not provided.
If you want to refetch the data, you need to manually call reload()
.
const {data, error, reload} = useFetch(() => fetchData(params))
useEffect(() => void reload(), [params, reload])
Note
useHook<T>()
has a generic type T
which is the type of the data returned by the function passed to the hook.
- When calling
reload()
, error
and data
are immediately/synchronously set to undefined
(via setState
) and the data is refetched.
- If you want to keep the last data while refetching, for example, to keep the last page of a paginated list until the new page is fetched, you can create a custom hook that retains the last data while fetching the new data.
export const useKeep = <T>(value: T): T => {
const ref = useRef(value)
if (value !== undefined) ref.current = value
return value ?? ref.current
}
This useKeep
hook is available in misc-hooks package.
- If you want to delay showing the loading indicator, you should implement that function in caller component.
export const useTimedOut = (timeout: number) => {
const [timedOut, enable] = useReducer(() => true, false)
useEffect(() => {
let cancelled = false
const timer = setTimeout(() => !cancelled && enable(), timeout)
return () => {
cancelled = true
clearTimeout(timer)
}
}, [enable, timeout])
return timedOut
}
const {data, error, reload} = useFetch(() => fetchData(params))
const timedOut = useTimedOut(500)
return error
? <ErrorPage/>
: data
? <Data data={data}/>
: timedOut
? <Loading/>
: null
This useTimedOut
hook is available in misc-hooks package.
- For now, both
data
and Error
's types are defined. We will improve the type definition in the future.
Component Usage
import {Fetch} from 'clean-fetch'
return <Fetch fetch={() => fetchJson('/user/info')}>
{(data, reload) => <Data data={data} reload={reload}/>}
</Fetch>
Fetch
is a React component which takes 3 props:
- (Optional)
Fallback
: a component that takes an optional error
prop and a reload
prop which is a function that reloads the data.
If error
is undefined
, it means the data is loading.
By default, it is a component which returns null
.
fetch
: a function that returns a promise which resolves to the data.
children
: a function that takes 2 arguments: the data and a reload
function and returns a ReactNode.