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/[email protected]/umd/react.production.min.js"
  crossorigin
></script>

<script
  src="https://unpkg.com/[email protected]/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

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