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

v3.2.0

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:

v3.1.0

Adds small rpc implementation

v3.0.6

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

fix(internal: useIsomorphicLayoutEffect)

Adds useIsomorphicLayoutEffect

v3.0.4

feat: performance

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