v2.5.6
Feat: useFetch
extends the native Fetch
API
useFetch
now extends the Fetch API. This gives more control over the request when calling useFetch
, so things like: mode
, integrity
, keepalive
, cache
, referrer
, etc, can be passed in the request config. This helps keep the useFetch
hook configuration as similar as possible to the native Fetch API while still adding helpful features that can make data fetching in React more declarative and efficient.
Important changes:
- Because the
RequestInit
offetch
already has a reserverdcache
property, thecache
property inuseFetch
was changed tocacheProvider
. The same applies to thequeryProvider
(for graphql) function. - If
id
is not passed in the request config, a default id will be created using themethod
and theurl
of the request (aURI
). This doesn't apply to graphl because the id is generated using the query passed.
For example:
import useFetch from 'http-react'
function App() {
const { data } = useFetch('/save-work', {
mode: 'no-cors',
referrerPolicy: 'no-referrer',
method: 'POST'
})
return <div>{data?.log}</div>
}
If id
is not passed, the default id of that request will be POST /save-work
This is important because it will allow you to read the information about a request from any component/hook, so you could do:
const { data, loading } = useFetchId('POST /save-work')
It will also make it easier to invalidate a request from anywhere (not necesarily a component) using revalidate
import { revalidate } from 'http-react'
function forceRevalidation(){
revalidate('POST /save-work')
}
The Documentation will be updated soon
I'm open to suggestions and feedback!