Skip to content

Releases: atomic-state/http-react

v3.2.0

20 Dec 16:33
db8c174
Compare
Choose a tag to compare

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:

image

v3.1.0

03 Nov 07:22
efa9b20
Compare
Choose a tag to compare

Adds small rpc implementation

v3.0.6

08 Oct 20:01
6c8b313
Compare
Choose a tag to compare

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 be undefined

v3.0.5

10 Feb 03:00
1ff11f6
Compare
Choose a tag to compare

fix(internal: useIsomorphicLayoutEffect)

Adds useIsomorphicLayoutEffect

v3.0.4

09 Feb 16:42
7fd19aa
Compare
Choose a tag to compare

feat: performance

  • Improved useFetch performance
  • useFetch will initialize revalidation only when data is accessed
  • Revalidation will start only when data is accesed

v3.0.2

08 Feb 04:08
ed5ac01
Compare
Choose a tag to compare

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

04 Feb 19:03
9cc6e9e
Compare
Choose a tag to compare

Fix: suspense

Fixed the Too many re-renders problem when using multiplie components with suspense

v3.0.0

03 Feb 01:53
a61c35c
Compare
Choose a tag to compare

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 as Axios. The fetcher function must return an object with at least the data and status properties (you can also return a json method instead of data).
  • The object created with Client.create now also includes the config 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

01 Feb 20:51
ceff5db
Compare
Choose a tag to compare

Fix: cancel, SSRSuspense

  • Requests always get cancelled after props change
  • Fixed the SSRSuspense component. It can now wrap more than one instance of the same useFetch

v2.9.7

01 Feb 16:30
6456c0b
Compare
Choose a tag to compare

Fix: re-renders, onPropsChange

  • Fixes unnecesart initial re-render
  • Removed the onPropsChange api