v2.6.3

Feat: use client

adds use client to main library file, which makes it possible to use FetchConfig inside Server components in Next.js

v2.6.2

Feat: dates and auto

• Fixed request being sent even with auto set to false
• useFetch now also returns requestStart and requestEnd, which are the Date objects in which the request started and ended, specificaly
• refresh, attemptInterval and debounce now need to be a TimeSpan. If you pass a number, it will be taken as miliseconds. You can also pass a string (e.g., 10 sec, 30 min, 1 w, etc). If a unit of time is not valid (e.g. 30 secc), the amount will be taken as miliseconds

v2.6.1

Feat: pagination

• Pagination works out-of-the-box
• By default, cancelOnChange is true

v2.6.0

Feat: useFetch

Removed unnecesary useState calls

v2.5.9

Feat: responseTime and useResponseTime

Adds useResponseTime hook that returns the time (in miliseconds) it took to complete a request. Example:

import { useFetch } from 'http-react'

function App() {
  const { data, loading, error, responseTime } = useFetch('/api/profile')

  if (loading) return <p>Loading</p>

  if (error) return <p>Error</p>

  return (
    <div>
      <p>Email: {data?.email}</p>
      <small>Completed in {responseTime} miliseconds</small>
    </div>
  )
}

If you wanted to get the response time from another component/hook, you can do so by using the useResponseTime hook, which takes the id of the request as argument. Because we did not pass an id to the useFetch call above, we can use the method and the url instead:

import { useResponseTime } from 'http-react'

function ResponseTimeBanner() {
  const responseTime = useResponseTime('GET /api/profile')

  return <small>Completed in {responseTime} miliseconds</small>
}

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 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!

v2.5.4

Chore:

Makes useFetch the default export

v2.5.1

Chore: events

Removed events library to have React as the only dep.

v2.5.0

Feat: useFetch

• config properties can be passed directly to the options object instead of config
• Refactored code

v2.4.8

Chore

Split library into multiple files