v2.9.1

Fix: error

Fixes error state being null after revalidation started

v2.9.0

Fixes:

• Reduces re-renders by using a single state variable instead of 6 and setting the new request state in the finally block
• useFetch now returns more properties. The new properties are:
  • revalidating: This is true if at least one request has completed succesfuly and a new request is being sent
  • hasData: This is true if data is not undefined or null
  • success: This is true if there is no error and the request is not loading
  • loadingFirst: This is 'true' if the request is being sent for the first time and becomes false in subsequent requests
  • expiration: This is a Date object of the expiration date of the data. This will depend on the maxCacheAge property passed to useFetch

Feat:

A Request instance can be passed to useFetch instead of just a URL. useFetch will get the properties of the Request passed and include them in a new request. This is useful if you have existing requests:

Example:

import useFetch from 'http-react'

// an instance of Request
const ApiRequest = new Request('https:/api/[resource]/[id]', {
  headers: {
    Authorization: 'Token'
  }
})

function Profile() {
  const { data, hasData } = useFetch(ApiRequest, {
    params: {
      resource: 'profile',
      id: 12
    }
  })
  if (!hasData) return <p>Loading....</p>

  return (
    <div>
      <h2>{data.name}</h2>
    </div>
  )
}

The 'url' and 'method' of the request will still be used for deduplication if no 'id' is provided

More configuration:

• You can now pass a maxCacheAge property to useFetch. (It can have the same shape as refresh or debounce). With this, new requests will not be sent until the data has expired (this is done using timestampts that are stored in the cacheProvider, so if you are using a persistent cache like 'localStorage' or 'sessionStorage', a full page reload will not send a new request and return the cached data instead). You will be able to see the exact time the data will expire by reading the expiration property returned from useFetch. If no requests have been sent for that particular configuration, null will be returned instead

Additional hooks:

Added more hooks for the configurations above. They work by passing them the request id (See Request id). They are:

• useOnline: Returns the online status of the request
• useLoadingFirst: Returns true if a request is being sent for the first time
• useRevalidating: Returns true if at least one request has completed and loading is true
• useExpiration: Returns the expiration date of the last data retrieved from useFetch
• useHasData: Returns true if data is not null or undefined
• useSuccess: Returns true if the request completed succcesfuly and loading is true. false if the request is loading.

Additionaly, a new hook for reFetch was added:

• useReFetch: Returns the function that will revalidate a request using its id

v2.8.2

fix: error, data, loading:

sets the 'loading', 'data' and 'error' state in the right order

v2.7.8

Feat: server components

re-exports FetchConfig and SSRSuspense from separate module with use client directive. Now FetchConfig can be imported directly from http-react instead of http-react/dist/server when using Server components

v2.7.5

Feat: FetchConfig

Adds re-export of FetchConfig that can be used inside Next.js's server components:

import { FetchConfig } from 'http-react/dist/server'

export default async function Layout({ children }) {
  return (
    <div>
      <FetchConfig baseUrl='/api'>{children}</FetchConfig>
    </div>
  )
}

v2.7.0

Fix: onError, graphql

• verifies if 'onError' is a function. Sets 'error' state correctly
• Notifies other subscribers when a graphql request has finished

v2.6.8

For production apps

<!-- Add React and ReactDOM -->
<script
  src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"
  crossorigin
></script>

<script
  src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"
  crossorigin
></script>

<!-- Add Http React -->
<script src="https://unpkg.com/http-react/dist/browser/http-react.min.js"></script>

v2.6.7

Feat: HttpReact client (works with sever components)

• Adds the HttpReact object, which can be used to make requests imperatively. It has a method for each HTTP verb, like get, post, etc. It also has an extend method, similar to axios.create

Example with a sever component in Next.js:

import { HttpReact } from 'http-react'
import { cookies } from 'next/headers'

export default async function MyServerPage() {
  const session = cookies().get('appSession')?.value

  const { data, error } = await HttpReact.get('/api/auth', {
    headers: { Authorization: 'Token ' + session }
  })

  if (!data || error) return <Login />

  return <App />
}

Using .extend:

import { HttpReact } from 'http-react'

const client = HttpReact.extend({
  baseUrl: '/api',
  headers: {
    Authorization: 'Token'
  }
})

export default async function MyServerPage() {
  const { data, error } = await client.get('/auth')

  if (!data || error) return <Login />

  return <App />
}

This also works in client-side components and with getServerSideProps

v2.6.5

Feat: initialization

The first request is sent before the first render

v2.6.4

Fix: loading

• Makes the loading state more reliable
• exposes defaultCache from src/internal