Releases: atomic-state/http-react
v3.2.0
Fixes and feats.
- Removes unnecessary '?' at end of urls that don't have query params
- Adds support for array query params
Added support for lists of query params. Example:
"use client"
import useFetch from "@/httpreact"
export default function Home() {
const { data } = useFetch("/api/something/1", {
query: {
a: 1,
b: [2, 3, 4, "hello there"],
},
})
return (
<main className="p-24">
<h2>Home page</h2>
<pre>{serialize(data, null, 2)}</pre>
</main>
)
}
The requested url will be: /api/something/1?a=1&b=2&b=3&b=4&b=hello%20there
, and the network tab should show something like this:
v3.1.0
Adds small rpc implementation
v3.0.6
Adds the useManualFetch
hook, which makes a fetch only when triggered manually
Example:
import { useManualFetch, serialize } from 'http-react'
export default function Home() {
const { data, reFetch } = useManualFetch('https://jsonplaceholder.typicode.com/todos/3')
return (
<main>
<button onClick={reFetch}>Request now</button>
<hr />
<pre>{serialize(data, null, 2)}</pre>
</main>
)
}
In this case, while the
Request now
button is not clicked,data
will beundefined
v3.0.5
fix(internal: useIsomorphicLayoutEffect
)
Adds useIsomorphicLayoutEffect
v3.0.4
feat: performance
- Improved useFetch performance
useFetch
will initialize revalidation only whendata
is accessed- Revalidation will start only when
data
is accesed
v3.0.2
Fix: performance
reFetch
only re-renders when the accessed values change. This is done by keeping track of which values are read with React.useRef
. For example, you may have a component that only reads the error
returned by useFetch
, in that case, the component will re-render only then the request fails. Same with loading
and data
v3.0.1
Fix: suspense
Fixed the Too many re-renders problem when using multiplie components with suspense
v3.0.0
Feat: fetcher
- The fetching mechanism is now configurable by passing the
fetcher
prop. This can be set globally using the<FetchConfig>
context component or per-request. This opens the posibility of using other data-fetching libraries such asAxios
. Thefetcher
function must return an object with at least thedata
andstatus
properties (you can also return ajson
method instead ofdata
). - The object created with
Client.create
now also includes theconfig
property, which can be passed to the<FetchConfig>
component.
Example of a custom fetcher
with axios:
import useFetch from 'http-react'
import axios from 'axios'
const fetcher = (url, config) => axios(url, config)
export default function Profile() {
const { data, loading, error, code, id } = useFetch('/api/profile', {
fetcher
})
if (loading) return <p>Loading...</p>
if (error) return <p>Failed to fetch</p>
return (
<div>
<h2>Profile</h2>
<p>Name: {data.name}</p>
</div>
)
}
v2.9.8
Fix: cancel, SSRSuspense
- Requests always get cancelled after props change
- Fixed the
SSRSuspense
component. It can now wrap more than one instance of the sameuseFetch
v2.9.7
Fix: re-renders, onPropsChange
- Fixes unnecesart initial re-render
- Removed the
onPropsChange
api