Skip to content

v2.5.6

Compare
Choose a tag to compare
@danybeltran danybeltran released this 19 Jan 01:53
· 185 commits to master since this release
bb4fb56

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 of fetch already has a reserverd cache property, the cache property in useFetch was changed to cacheProvider. The same applies to the queryProvider (for graphql) function.
  • If id is not passed in the request config, a default id will be created using the method and the url of the request (a URI). 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!