v3.9.0

Fetch states are now decoupled, allowing for granular dependencies on useFetch and render optimizations

v3.8.7

v3.8.7

Fixes:

• Fixes stale data being shown when mutating local data.

v3.8.5

Features

Adds LocalStorageCacheProvider.

Usage:

function MyLayout({ children }) {
  return (
     <LocalStorageCacheProvider>{children}</LocalStorageCacheProvider>
  )
}

The above example prevents hydration errors as loading from cache runs during render. To load instantly, pass instant

function MyLayout({ children }) {
  return (
     <LocalStorageCacheProvider instant>{children}</LocalStorageCacheProvider>
  )
}

v3.8.3

Merge pull request #213 from atomic-state/fixes/unexpected-revalidation

fixes(mutate):

v3.8.2

Fixes

• Fixes unexpected revalidation after data mutation

v3.7.9

Features: transform

useFetch.data will now be inferred from the transform function's return type if present

Example:

import useFetch, { fetchOptions } from "http-react";

// You can create reusable fetch options with the fetchOptions fn
const charactersFetch = fetchOptions({
  url: "https://rickandmortyapi.com/api/character",
  key: ["characters"],
  default: { results: [] } as { results: { id: number }[] },
  transform(data) {
    return data.results.find((character) => character.id === 1)!;
  },
});

function Todos() {
  // Data will be inferred as { id: number }
  const { data } = useFetch(charactersFetch);

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

v3.7.8

Features

• Adds key property to fetch options, which will eventually replace id

v3.7.7

Fature: Add fetchOptions function

Example usage:

import useFetch, { fetchOptions } from "http-react"

// TS
type TodoType = {
  id: number;
  title: string;
  userId: number;
  completed: boolean;
};

// Create your fetchOptions
const todosFetch = fetchOptions<TodoType[]>({
  default: [], // initial data
  fetcher: () => fetch("https://jsonplaceholder.typicode.com/todos"),
});


// Use that options object
function Todos() {
  const { data, loading, refresh } = useFetch(todosFetch);

  return (
    <div>
      <h2 className="text-2xl font-semibold">Todos</h2>
      <button onClick={refresh}>Refresh todos...</button>
      {data.map((todo) => (
        <div key={"todo" + todo.id}>{todo.title}</div>
      ))}
    </div>
  );
}

v3.7.5

v3.7.5

Enhancements

• By default, useServerAction.auto will be false, making useServerMutation a deprecated function

v3.7.4

v3.7.4

Transform API

• Similar to middleware but it transforms data on the fly without making a new request (happens instantly)
• transform first checks data is not undefined before running, which makes sure it only runs when data or fallback data exist, preventing (most) runtime errors that could arise when manipulatind data that could be undefined.

Example usage:

"use client"

import useFetch from "http-react"
import { useState } from "react"

import { type TodoType } from "@/types/todo"

export default function Home() {
  const [showUppercase, setShowUppercase] = useState(false)

  const { data, isLoading } = useFetch<TodoType>(
    "https://jsonplaceholder.typicode.com/todos/2",
    {
      // Supports TypeScript out of the box
      transform(data) {
        if (showUppercase) {
          const transformedTodo = {
            ...data,
            title: data?.title.toUpperCase(),
          }
          return transformedTodo
        }
        return data
      },
    }
  )

  if (isLoading) return <p>Loading...</p>

  return (
    <main>
      <button onClick={() => setShowUppercase(!showUppercase)}>
        Uppercase: {showUppercase ? "ON" : "OFF"}
      </button>

      <h2>Title: {data.title}</h2>
    </main>
  )
}