URL Parameters and Search Params

You can set global URL parameters and search params using FetchConfig, which will be automatically applied to all requests within its component tree.

Dynamic URL Parameters

Define routes with parameter placeholders using bracket notation:

components/profile.tsx

export default function Profile() {
  const { data } = useFetch('/[userId]/profile')
 
  return <div>Hello, {data.name}</div>
}

components/messages.tsx

export default function Messages() {
  const { data } = useFetch('/[userId]/messages')
 
  return <div>{data.length} messages</div>
}

Global Configuration

Configure parameters and search params globally in FetchConfig:

src/App.tsx

import { FetchConfig } from 'http-react'
 
import Profile from 'components/profile'
import Messages from 'components/messages'
 
export default function App() {
  return (
    <FetchConfig
      baseUrl='/api'
      params={{
        userId: 'some-user-id'
      }}
      query={{
        date: '2024-01-23'
      }}
    >
      <Profile />
      <Messages />
    </FetchConfig>
  )
}

Result

The URLs will be automatically constructed with the provided parameters and search params:

/[userId]/profile → /api/some-user-id/profile?date=2024-01-23
/[userId]/messages → /api/some-user-id/messages?date=2024-01-23

Learn more about params

Learn more about query

Fallback data SSR