If the last argument of useFetch is not a dependency array [], then it will not fire until you call one of the http methods like get, post, etc.

1import useFetch from 'use-http'
2
3function Todos() {
4  const [todos, setTodos] = useState([])
5  const { get, post, response, loading, error } = useFetch('https://example.com')
6
7  useEffect(() => { initializeTodos() }, []) // componentDidMount
8  
9  async function initializeTodos() {
10    const initialTodos = await get('/todos')
11    if (response.ok) setTodos(initialTodos)
12  }
13
14  async function addTodo() {
15    const newTodo = await post('/todos', { title: 'my new todo' })
16    if (response.ok) setTodos([...todos, newTodo])
17  }
18
19  return (
20    <>
21      <button onClick={addTodo}>Add Todo</button>
22      {error && 'Error!'}
23      {loading && 'Loading...'}
24      {todos.map(todo => (
25        <div key={todo.id}>{todo.title}</div>
26      ))}
27    </>
28  )
29}

This fetch is run onMount/componentDidMount. The last argument [] means it will run onMount. If you pass it a variable like [someVariable], it will run onMount and again whenever someVariable changes values (aka onUpdate). If no method is specified, GET is the default.

1import useFetch from 'use-http'
2
3function Todos() {
4  const options = {} // these options accept all native `fetch` options
5  // the last argument below [] means it will fire onMount (GET by default)
6  const { loading, error, data = [] } = useFetch('https://example.com/todos', options, [])
7  return (
8    <>
9      {error && 'Error!'}
10      {loading && 'Loading...'}
11      {data.map(todo => (
12        <div key={todo.id}>{todo.title}</div>
13      ))}
14    </>
15  )
16}

Can put suspense in 2 places. Either useFetch (A) or Provider (B).

1import useFetch, { Provider } from 'use-http'
2
3function Todos() {
4  const { data: todos = [] } = useFetch('/todos', {
5    suspense: true // A. can put `suspense: true` here
6  }, []) // onMount
7
8  return todos.map(todo => <div key={todo.id}>{todo.title}</div>)
9}
10
11function App() {
12  const options = {
13    suspense: true // B. can put `suspense: true` here too
14  }
15  return (
16    <Provider url='https://example.com' options={options}>
17      <Suspense fallback='Loading...'>
18        <Todos />
19      </Suspense>
20    </Provider>
21  )
22}

Can put suspense in 2 places. Either useFetch (A) or Provider (B). Suspense mode via managed state is very experimental.

1import useFetch, { Provider } from 'use-http'
2
3function Todos() {
4  const [todos, setTodos] = useState([])
5  // A. can put `suspense: true` here
6  const { get, response } = useFetch({ suspense: true })
7
8  const loadInitialTodos = async () => {
9    const todos = await get('/todos')
10    if (response.ok) setTodos(todos)
11  }
12
13  // componentDidMount
14  useEffect(() => {
15    loadInitialTodos()
16  }, [])
17
18  return todos.map(todo => <div key={todo.id}>{todo.title}</div>)
19}
20
21function App() {
22  const options = {
23    suspense: true // B. can put `suspense: true` here too
24  }
25  return (
26    <Provider url='https://example.com' options={options}>
27      <Suspense fallback='Loading...'>
28        <Todos />
29      </Suspense>
30    </Provider>
31  )
32}

The onNewData will take the current data, and the newly fetched data, and allow you to merge the two however you choose. In the example below, we are appending the new todos to the end of the current todos.

1import useFetch, { Provider } from 'use-http'
2
3const Todos = () => {
4  const [page, setPage] = useState(1)
5
6  const { data = [], loading } = useFetch(`/todos?page=${page}&amountPerPage=15`, {
7    onNewData: (currTodos, newTodos) => [...currTodos, ...newTodos], // appends newly fetched todos
8    perPage: 15, // stops making more requests if last todos fetched < 15
9  }, [page]) // runs onMount AND whenever the `page` updates (onUpdate)
10
11  return (
12    <ul>
13      {data.map(todo => <li key={todo.id}>{todo.title}</li>}
14      {loading && 'Loading...'}
15      {!loading && (
16        <button onClick={() => setPage(page + 1)}>Load More Todos</button>
17      )}
18    </ul>
19  )
20}
21
22const App = () => (
23  <Provider url='https://example.com'>
24    <Todos />
25  </Provider>
26)

⚠️ Do not destructure the response object! Details in this video. Technically you can do it, but if you need to access the response.ok from, for example, within a component's onClick handler, it will be a stale value for ok where it will be correct for response.ok. ️️⚠️

1var [request, response, loading, error] = useFetch('https://example.com')
2
3// want to use object destructuring? You can do that too
4var {
5  request,
6  response, // 🚨 Do not destructure the `response` object!
7  loading,
8  error,
9  data,
10  cache,    // methods: get, set, has, delete, clear (like `new Map()`)
11  get,
12  post,
13  put,
14  patch,
15  delete    // don't destructure `delete` though, it's a keyword
16  del,      // <- that's why we have this (del). or use `request.delete`
17  head,
18  options,
19  connect,
20  trace,
21  mutate,   // GraphQL
22  query,    // GraphQL
23  abort
24} = useFetch('https://example.com')
25
26// 🚨 Do not destructure the `response` object!
27// 🚨 This just shows what fields are available in it.
28var {
29  ok,
30  status,
31  headers,
32  data,
33  type,
34  statusText,
35  url,
36  body,
37  bodyUsed,
38  redirected,
39  // methods
40  json,
41  text,
42  formData,
43  blob,
44  arrayBuffer,
45  clone
46} = response
47
48var {
49  loading,
50  error,
51  data,
52  cache,  // methods: get, set, has, delete, clear (like `new Map()`)
53  get,
54  post,
55  put,
56  patch,
57  delete  // don't destructure `delete` though, it's a keyword
58  del,    // <- that's why we have this (del). or use `request.delete`
59  mutate, // GraphQL
60  query,  // GraphQL
61  abort
62} = request

1var request = useFetch('https://example.com')
2
3request.post('/todos', {
4  no: 'way'
5})

1const { get, abort, loading, data: repos } = useFetch('https://api.github.com/search/repositories?q=')
2
3// the line below is not isomorphic, but for simplicity we're using the browsers `encodeURI`
4const searchGithubRepos = e => get(encodeURI(e.target.value))
5
6<>
7  <input onChange={searchGithubRepos} />
8  <button onClick={abort}>Abort</button>
9  {loading ? 'Loading...' : repos.data.items.map(repo => (
10    <div key={repo.id}>{repo.name}</div>
11  ))}
12</>

1
2const QUERY = `
3  query Todos($userID string!) {
4    todos(userID: $userID) {
5      id
6      title
7    }
8  }
9`
10
11function App() {
12  const request = useFetch('http://example.com')
13
14  const getTodosForUser = id => request.query(QUERY, { userID: id })
15
16  return (
17    <>
18      <button onClick={() => getTodosForUser('theUsersID')}>Get User's Todos</button>
19      {request.loading ? 'Loading...' : <pre>{request.data}</pre>}
20    </>
21  )
22}

The Provider allows us to set a default url, options (such as headers) and so on.

1
2const MUTATION = `
3  mutation CreateTodo($todoTitle string) {
4    todo(title: $todoTitle) {
5      id
6      title
7    }
8  }
9`
10
11function App() {
12  const [todoTitle, setTodoTitle] = useState('')
13  const request = useFetch('http://example.com')
14
15  const createtodo = () => request.mutate(MUTATION, { todoTitle })
16
17  return (
18    <>
19      <input onChange={e => setTodoTitle(e.target.value)} />
20      <button onClick={createTodo}>Create Todo</button>
21      {request.loading ? 'Loading...' : <pre>{request.data}</pre>}
22    </>
23  )
24}

Query for todos

1import { useQuery } from 'use-http'
2
3export default function QueryComponent() {
4  
5  // can also do it this way:
6  // const [data, loading, error, query] = useQuery`
7  // or this way:
8  // const { data, loading, error, query } = useQuery`
9  const request = useQuery`
10    query Todos($userID string!) {
11      todos(userID: $userID) {
12        id
13        title
14      }
15    }
16  `
17
18  const getTodosForUser = id => request.query({ userID: id })
19  
20  return (
21    <>
22      <button onClick={() => getTodosForUser('theUsersID')}>Get User's Todos</button>
23      {request.loading ? 'Loading...' : <pre>{request.data}</pre>}
24    </>
25  )
26}

Add a new todo

1import { useMutation } from 'use-http'
2
3export default function MutationComponent() {
4  const [todoTitle, setTodoTitle] = useState('')
5  
6  // can also do it this way:
7  // const request = useMutation`
8  // or this way:
9  // const { data, loading, error, mutate } = useMutation`
10  const [data, loading, error, mutate] = useMutation`
11    mutation CreateTodo($todoTitle string) {
12      todo(title: $todoTitle) {
13        id
14        title
15      }
16    }
17  `
18  
19  const createTodo = () => mutate({ todoTitle })
20
21  return (
22    <>
23      <input onChange={e => setTodoTitle(e.target.value)} />
24      <button onClick={createTodo}>Create Todo</button>
25      {loading ? 'Loading...' : <pre>{data}</pre>}
26    </>
27  )
28}

Adding the Provider

These props are defaults used in every request inside the <Provider />. They can be overwritten individually

1import { Provider } from 'use-http'
2import QueryComponent from './QueryComponent'
3import MutationComponent from './MutationComponent'
4
5function App() {
6
7  const options = {
8    headers: {
9      Authorization: 'Bearer YOUR_TOKEN_HERE'
10    }
11  }
12  
13  return (
14    <Provider url='http://example.com' options={options}>
15      <QueryComponent />
16      <MutationComponent />
17    <Provider/>
18  )
19}
20

This example shows how we can do authentication in the request interceptor and how we can camelCase the results in the response interceptor

1import { Provider } from 'use-http'
2import { toCamel } from 'convert-keys'
3
4function App() {
5  let [token, setToken] = useLocalStorage('token')
6  
7  const options = {
8    interceptors: {
9      // every time we make an http request, this will run 1st before the request is made
10      // url, path and route are supplied to the interceptor
11      // request options can be modified and must be returned
12      request: async ({ options, url, path, route }) => {
13        if (isExpired(token)) {
14          token = await getNewToken()
15          setToken(token)
16        }
17        options.headers.Authorization = `Bearer ${token}`
18        return options
19      },
20      // every time we make an http request, before getting the response back, this will run
21      response: async ({ response, request }) => {
22        // unfortunately, because this is a JS Response object, we have to modify it directly.
23        // It shouldn't have any negative affect since this is getting reset on each request.
24        const res = response
25        if (res.data) res.data = toCamel(res.data)
26        return res
27      }
28    }
29  }
30  
31  return (
32    <Provider url='http://example.com' options={options}>
33      <SomeComponent />
34    <Provider/>
35  )
36}
37

This example shows how we can upload a file using useFetch.

1import useFetch from 'use-http'
2
3const FileUploader = () => {
4  const [file, setFile] = useState()
5  
6  const { post } = useFetch('https://example.com/upload')
7
8  const uploadFile = async () => {
9    const data = new FormData()
10    data.append('file', file)
11    if (file instanceof FormData) await post(data)
12  }
13
14  return (
15    <div>
16      {/* Drop a file onto the input below */}
17      <input onChange={e => setFile(e.target.files[0])} />
18      <button onClick={uploadFile}>Upload</button>
19    </div>
20  )
21}

This example shows how we can get .json(), .text(), .formData(), .blob(), .arrayBuffer(), and all the other http response methods. By default, useFetch 1st tries to call response.json() under the hood, if that fails it's backup is response.text(). If that fails, then you need a different response type which is where this comes in.

1import useFetch from 'use-http'
2
3const App = () => {
4  const [name, setName] = useState('')
5  
6  const { get, loading, error, response } = useFetch('http://example.com')
7
8  const handleClick = async () => {
9    await get('/users/1?name=true') // will return just the user's name
10    const text = await response.text()
11    setName(text)
12  }
13  
14  return (
15    <>
16      <button onClick={handleClick}>Load Data</button>
17      {error && error.messge}
18      {loading && "Loading..."}
19      {name && <div>{name}</div>}
20    </>
21  )
22}

This example shows how to remove a header all together. Let's say you have <Provider url='url.com' options={{ headers: { Authentication: 'Bearer MY_TOKEN' } }}><App /></Provider>, but for one api call, you don't want that header in your useFetch at all for one instance in your app. This would allow you to remove that.

1import useFetch from 'use-http'
2
3const Todos = () => {
4  // let's say for this request, you don't want the `Accept` header at all
5  const { loading, error, data: todos = [] } = useFetch('/todos', globalOptions => {
6    delete globalOptions.headers.Accept
7    return globalOptions
8  }, []) // onMount
9  return (
10    <>
11      {error && error.messge}
12      {loading && "Loading..."}
13      {todos && <ul>{todos.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>}
14    </>
15  )
16}
17
18const App = () => {
19  const options = {
20    headers: {
21      Accept: 'application/json'
22    }
23  }
24  return (
25    <Provider url='https://url.com' options={options}><Todos /></Provider>
26}

In this example you can see how retryOn will retry on a status code of 305, or if we choose the retryOn() function, it returns a boolean to decide if we will retry. With retryDelay we can either have a fixed delay, or a dynamic one by using retryDelay(). Make sure retries is set to at minimum 1 otherwise it won't retry the request. If retries > 0 without retryOn then by default we always retry if there's an error or if !response.ok. If retryOn: [400] and retries > 0 then we only retry on a response status of 400.

1import useFetch from 'use-http'
2
3const TestRetry = () => {
4  const { response, get } = useFetch('https://httpbin.org/status/305', {
5    // make sure `retries` is set otherwise it won't retry
6    retries: 1,
7    retryOn: [305],
8    // OR
9    retryOn: async ({ attempt, error, response }) => {
10      // returns true or false to determine whether to retry
11      return error || response && response.status >= 300
12    },
13
14    retryDelay: 3000,
15    // OR
16    retryDelay: ({ attempt, error, response }) => {
17      // exponential backoff
18      return Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)
19      // linear backoff
20      return attempt * 1000
21    }
22  })
23
24  return (
25    <>
26      <button onClick={() => get()}>CLICK</button>
27      <pre>{JSON.stringify(response, null, 2)}</pre>
28    </>
29  )
30}