`FetchConfig`

The FetchConfig component sets global configuration for all useFetch calls within its component tree. This includes settings like headers, base URLs, fallback values, caching behavior, and more.

Individual requests can still override these global settings with their own configuration.

Basic Usage

Wrap your app or specific sections with FetchConfig:

import { FetchConfig } from 'http-react'
 
export default function App({ children }) {
  return (
    <FetchConfig
      headers={{
        Authorization: 'my-token'
      }}
      value={{
        'GET /todos': []
      }}
    >
      {children}
    </FetchConfig>
  )
}

With this configuration, every useFetch call within the component tree will automatically include the Authorization header.

Nested Configuration

You can nest multiple FetchConfig components to apply different settings to different parts of your app:

import useFetch, { FetchConfig } from 'http-react'
 
import LegacyComponent from '@components/legacy'
import NewComponent from '@components/new'
 
export default function App() {
  return (
    <div>
      <FetchConfig
        baseUrl='/api/v1'
        headers={{
          Authorization: 'Old token'
        }}
      >
        <LegacyComponent />
      </FetchConfig>
      <FetchConfig
        baseUrl='/api/v2'
        headers={{
          Authorization: 'New token'
        }}
      >
        <NewComponent />
      </FetchConfig>
    </div>
  )
}

Custom Cache Provider

Customize how data is cached by providing a custom cache provider:

import { FetchConfig } from 'http-react'
import { storage } from 'atomic-state'
 
export default function App({ children }) {
  return (
    <FetchConfig baseUrl='/api' cacheProvider={storage}>
      {children}
    </FetchConfig>
  )
}

Revalidation Options

Configure when requests should automatically revalidate:

import { FetchConfig } from 'http-react'
 
export default function App({ children }) {
  return (
    <FetchConfig revalidateOnFocus revalidateOnMount={false}>
      {children}
    </FetchConfig>
  )
}

This configuration will revalidate data when the browser window regains focus.

Server Component Integration

In React Server Components, you can pass promises as fallback values without awaiting them:

import { FetchConfig } from 'http-react'
 
function getTodos() {
  return fetch('https://api.com/todos').then((res) => res.json())
}
 
export function MyServerComponent({ children }) {
  return (
    <FetchConfig
      value={{
        todos: getTodos() // Promise is passed directly
      }}
    >
      <div>{children}</div>
    </FetchConfig>
  )
}

Then access the data in your client component:

'use client'
 
import useFetch from 'http-react'
 
export default function Todos() {
  const { data } = useFetch('/todos', {
    key: 'todos' // Custom Key matches the key in FetchConfig
  })
 
  return (
    <div>
      <h2>Total todos: {data.length}</h2>
    </div>
  )
}

Learn more about revalidateOnMount

Reusing requests Fallback data