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

v3.7.3

v3.7.3

Enhancements

• Prevents unexpected side effects by avoiding setting global cache server side

v3.7.2

v3.7.2

Improvements:

• Improves <Suspense> support
• Improves Supense errors when no fallback data is provided

v3.6.7

Enhancements

• Enhances caching with maxCacheAge with debounce