v3.6.6

Fixes

• Fixes mutate not updating data after initial fetch

v3.6.4

Important fix

• Fixes errors not being returned in prod when using server actions

v3.6.3

Features and enhancements

• Adds the function $searchParams that returns all searchParams
• Enhances the useFetch function: the submit() method can be used with any data type

v3.5.7

Enhancements

• The jsonCompare fn can be used for shallow comparison

v3.5.6

Features

attempts can now be a function

Example usage (retry 4 times):

const { data } = useFetch("/api/data", {
  attempts({ status, res }) {
    if (status === 404) return // Don't retry 404s

    console.log("Failed to fetch ", res.url)
    return 4
  },
  attemptInterval: "2 sec",
})

You can always use a number as attempts

v3.5.4

Enhancements

• Fixes FetchConfig for chunking: promises can be passed as fallback data in <FetchConfig>
• Default values (fallback data) are overwriten always when present in <FetchConfig>

v3.3.2

Features

Adds the submit method

The submit method is expected to be used in a <form> element. It will send the request body as FormData.

Usage:

"use client"

import { useMutation } from "http-react"

export default function Home() {

  // You can also read 'isLoading'
  const { submit, isPending, error } = useMutation("/api/test", {
    method: "POST",
  })

  return (
    <main className="p-16">
      <form action={submit}>
        <input
          type="text"
          name="email"
          className="border-2 border-black p-2 rounded-lg"
        />
      </form>
      {isPending && <p>Submitting</p>}
      {error && <p>Error</p>}
    </main>
  )
}

v3.3.0

Features

• Adds the useServerMutation hook:

The useSeverMutation hook works like the useServerAction  hook except it is not automatic.

• Default values can be passed in a simpler way in <FetchConfig>:

Before:

<FetchConfig
  defaults={{
    "GET /some url": {
      id: "SomeId", // Required if using a custom id
      value: {
        a: "b",
      },
    },
  }}
>
  {children}
</FetchConfig>

After:

<FetchConfig
  value={{
    SomeId: {
      a: "b",
    },
  }}
>
  {children}
</FetchConfig>

• Adds the actionResult helper

The actionResult function helps format an action's return value to have automatic type inference when using an action with the useServerAction and useServerMutation hooks. This is not mandatory.

Example:

// actiont.ts
"use server"

import { actionResult } from "http-react"

export async function getServerData({ id }: { id: number }) {
  const someData = await getData(id)

  return actionResult(someData, { status: 200 })

}

The { status: 200 } part is optional

Using the action:

import { useServerAction } from "http-react"

import { getServerData } from "@/actions"

function useMyAction() {
  const { data } = useServerAction(getServerData, {
    params: {
      id: 1
    }
  })
}

Both data and params have static typing infered from the action

v3.2.9

Enhancements: useServerAction

• Enhances the useServerAction hook by making id optional and creating mock ids internally
• Provides better code documentation

Usage:

// actions.ts
'use server'

export async function getData({ id }: { id :string }) {
  const dt = await getDbData()

  return { data: dt }
}

// page.tsx
'use client'
import { useServerAction } from "http-react"

import { getData } from "@/actions"

export default function Page() {
  // type of 'data' is inferred
  const { data, loading } = useServerAction(getData, {
    params: {
      id: "some-id",
    },
  })

  return ...
}

v3.2.3

• Uses modular import instead of import * from 'react'
• Uses Map instead of objects