searchParams and params

You can set global params and global URL search params. For example:

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

Inside App.tsx:

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

Now, the url string will be:

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

Learn more about params

Learn more about query

Fallback data SSR