useFetch

- Request/response interceptors - Suspense^{(experimental)} support- useFetch - suspense ^{(experimental)} [](https://codesandbox.io/s/usefetch-suspense-i22wv) [](https://www.youtube.com/watch?v=7qWLJUpnxHI&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=2&t=0s)

Basic Usage Managed State useFetch

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.

0. ``` js
1. import useFetch from 'use-http'
2. 
   
3. function 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. }
30. ```

Basic Usage Auto-Managed State useFetch

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.

0. ``` js
1. import useFetch from 'use-http'
2. 
   
3. function 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. }
17. ```

Suspense Mode^{(experimental)} Auto-Managed State

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

0. ``` js
1. import useFetch, { Provider } from 'use-http'
2. 
   
3. function 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. 
    
11. function 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. }
23. ```

Suspense Mode^{(experimental)} Managed State

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

0. ``` js
1. import useFetch, { Provider } from 'use-http'
2. 
   
3. function 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. 
    
21. function 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. }
33. ```

Pagination + Provider

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.

0. ``` js
1. import useFetch, { Provider } from 'use-http'
2. 
   
3. const 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. 
    
22. const App = () => (
23.   <Provider url='https://example.com'>
24.     <Todos />
25.   </Provider>
26. )
27. ```

Destructured useFetch

⚠️ Do not destructure the response object! Details in this video. Technically you can do it, but if you need to access theresponse.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.  ️️⚠️

0. ``` js
1. var [request, response, loading, error] = useFetch('https://example.com')
2. 
   
3. // want to use object destructuring? You can do that too
4. var {
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.
28. var {
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. 
    
48. var {
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
63. ```

Relative routes useFetch

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

Abort useFetch

0. ``` js
1. const { 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`
4. const 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. </>
13. ```

GraphQL Query useFetch

0. ``` js
1. 
   
2. const QUERY = `
3.   query Todos($userID string!) {
4.     todos(userID: $userID) {
5.       id
6.       title
7.     }
8.   }
9. `
10. 
    
11. function 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. }
23. ```

GraphQL Mutation useFetch

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

0. ``` js
1. 
   
2. const MUTATION = `
3.   mutation CreateTodo($todoTitle string) {
4.     todo(title: $todoTitle) {
5.       id
6.       title
7.     }
8.   }
9. `
10. 
    
11. function 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. }
25. ```

Provider using the GraphQL useMutation and useQuery

Query for todos

0. ``` js
1. import { useQuery } from 'use-http'
2. 
   
3. export 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. }
27. ```

Add a new todo

0. ``` js
1. import { useMutation } from 'use-http'
2. 
   
3. export 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. }
29. ```

Adding the Provider

These props are defaults used in every request inside the ``. They can be overwritten individually

0. ``` js
1. import { Provider } from 'use-http'
2. import QueryComponent from './QueryComponent'
3. import MutationComponent from './MutationComponent'
4. 
   
5. function 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. 
    
21. ```

Request/Response Interceptors

    

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

    

0. ``` js
1. import { Provider } from 'use-http'
2. import { toCamel } from 'convert-keys'
3. 
   
4. function 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. 
    
38. ```

File Uploads (FormData)

    

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

    

0. ``` js
1. import useFetch from 'use-http'
2. 
   
3. const 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. }
22. ```

Handling Different Response Types

    

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.

0. ``` js
1. import useFetch from 'use-http'
2. 
   
3. const 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. }
23. ```

Overwrite/Remove Options/Headers Set in Provider

    

This example shows how to remove a header all together. Let's say you have ``, 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.

0. ``` js
1. import useFetch from 'use-http'
2. 
   
3. const 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. 
    
18. const 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. }
27. ```

Retries retryOn & retryDelay

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.

0. ``` js
1. import useFetch from 'use-http'
2. 
   
3. const 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. }
31. ```

This is exactly what you would pass to the normal js `fetch`, with a little extra. All these options can be passed to the ``, or directly to `useFetch`. If you have both in the `` and in `useFetch`, the `useFetch` options will overwrite the ones from the ``

Option	Description	Default
---------------------	--------------------------------------------------------------------------|-------------
`cacheLife`	After	`0`
`cachePolicy`	These	`cache-first`
`data`	Allows	`undefined`
`interceptors.request`	Allows	`undefined`
`interceptors.response`	Allows	`undefined`
`loading`	Allows	`false`
`onAbort`	Runs	empty
`onError`	Runs	empty
`onNewData`	Merges	`(curr,
`onTimeout`	Called	empty
`persist`	Persists	`false`
`perPage`	Stops	`0`
`responseType`	This	`['json',
`retries`	When	`0`
`retryDelay`	You	`1000`
`retryOn`	You	`[]`
`suspense`	Enables	`false`
`timeout`	The	`0`

0. ``` js
1. const options = {
2.   // accepts all `fetch` options such as headers, method, etc.
3. 
   
4.   // The time in milliseconds that cache data remains fresh.
5.   cacheLife: 0,
6. 
   
7.   // Cache responses to improve speed and reduce amount of requests
8.   // Only one request to the same endpoint will be initiated unless cacheLife expires for 'cache-first'.
9.   cachePolicy: 'cache-first', // 'no-cache'
10.   
11.   // set's the default for the `data` field
12.   data: [],
13. 
    
14.   // typically, `interceptors` would be added as an option to the ``
15.   interceptors: {
16.     request: async ({ options, url, path, route }) => { // `async` is not required
17.       return options // returning the `options` is important
18.     },
19.     response: async ({ response, request }) => {
20.       // notes:
21.       // - `response.data` is equivalent to `await response.json()`
22.       // - `request` is an object matching the standard fetch's options
23.       return response // returning the `response` is important
24.     }
25.   },
26. 
    
27.   // set's the default for `loading` field
28.   loading: false,
29.   
30.   // called when aborting the request
31.   onAbort: () => {},
32.   
33.   // runs when an error happens.
34.   onError: ({ error }) => {},
35. 
    
36.   // this will allow you to merge the `data` for pagination.
37.   onNewData: (currData, newData) => {
38.     return [...currData, ...newData]
39.   },
40.   
41.   // called when the request times out
42.   onTimeout: () => {},
43.   
44.   // this will tell useFetch not to run the request if the list doesn't haveMore. (pagination)
45.   // i.e. if the last page fetched was < 15, don't run the request again
46.   perPage: 15,
47. 
    
48.   // Allows caching to persist after page refresh. Only supported in the Browser currently.
49.   persist: false,
50. 
    
51.   // this would basically call `await response.json()`
52.   // and set the `data` and `response.data` field to the output
53.   responseType: 'json',
54.   // OR can be an array. It's an array by default.
55.   // We will try to get the `data` by attempting to extract
56.   // it via these body interface methods, one by one in
57.   // this order. We skip `formData` because it's mostly used
58.   // for service workers.
59.   responseType: ['json', 'text', 'blob', 'arrayBuffer'],
60. 
    
61.   // amount of times it should retry before erroring out
62.   retries: 3,
63. 
    
64.   // The time between retries
65.   retryDelay: 10000,
66.   // OR
67.   // Can be a function which is used if we want change the time in between each retry
68.   retryDelay({ attempt, error, response }) {
69.     // exponential backoff
70.     return Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)
71.     // linear backoff
72.     return attempt * 1000
73.   },
74. 
    
75.   // make sure `retries` is set otherwise it won't retry
76.   // can retry on certain http status codes
77.   retryOn: [503],
78.   // OR
79.   async retryOn({ attempt, error, response }) {
80.     // retry on any network error, or 4xx or 5xx status codes
81.     if (error !== null || response.status >= 400) {
82.       console.log(`retrying, attempt number ${attempt + 1}`);
83.       return true;
84.     }
85.   },
86. 
    
87.   // enables experimental React Suspense mode
88.   suspense: true, // defaults to `false`
89.   
90.   // amount of time before the request get's canceled/aborted
91.   timeout: 10000,
92. }
93. 
    
94. useFetch(options)
95. // OR
96. <Provider options={options}><ResOfYourApp />Provider>
97. ```

Who's using use-http?

Does your company use use-http? Consider sponsoring the project to fund new features, bug fixes, and more.

Browser Support

If you need support for IE, you will need to add additional polyfills.  The React docs suggest [these polyfills][4], but from [this issue][2] we have found it to work fine with the [react-app-polyfill]. If you have any updates to this browser list, please submit a PR!

[	[	[	[	[
---------	---------	---------	---------	---------
12+	last	last	last	last

Feature Requests/Ideas

If you have feature requests, [submit an issue][1] to let us know what you would like to see!

Todos

- [ ] OSS analytics

- [ ] contributors

- [ ] prefetching

- [ ] global cache state management

- [ ] optimistic updates

- [ ] persist support for React Native

- [ ] better loading state management. When using only 1 useFetch in a component and we use

      Promise.all([get('/todos/1'), get('/todos/2')]) then don't have a loading true,

      loading false on each request. Just have loading true on 1st request, and loading false

      on last request.

- [ ] is making a gitpod useful here? 🤔

- [ ] suspense

- [ ] triggering it from outside the `` component.

    - add .read() to request

    - or make it work with just the suspense: true option

    - both of these options need to be thought out a lot more^

  - [ ] tests for this^ (triggering outside)

  - [ ] cleanup tests in general. Snapshot tests are unpredictably not working for some reason.

    - snapshot test resources: swr, react-apollo-hooks

    - basic test resources: fetch-suspense, @testing-library/react-hooks suspense PR

- [ ] maybe add translations like this one

- [ ] maybe add contributors all-contributors

- [ ] add sponsors similar to this

- [ ] Error handling

  - [ ] if calling response.json() and there is no response yet

- [ ] tests

  - [ ] tests for SSR

  - [ ] tests for react native see here

  - [ ] tests for GraphQL hooks useMutation + useQuery

  - [ ] tests for stale response see this PR

  - [ ] tests to make sure response.formData() and some of the other http response methods work properly

  - [ ] the onMount works properly with all variants of passing useEffect(fn, [request.get]) and not causing an infinite loop

  - [ ] async tests for interceptors.response

  - [ ] aborts fetch on unmount

  - [ ] does not abort fetch on every rerender

  - [ ] retryDelay and timeout are both set. It works, but is annoying to deal with timers in tests. resource

  - [ ] timeout with retries > 0. (also do retires > 1) Need to figure out how to advance timers properly to write this and the test above

- [ ] take a look at how react-apollo-hooks work. Maybe aduseSubscription and const request = useFetch(); request.subscribe() or something along those lines

- [ ] make this a github package

  - see ava packages

- [ ] Documentation:

  - [ ] show comparison with Apollo

  - [ ] figure out a good way to show side-by-side comparisons

  - [ ] show comparison with Axios

- [ ] potential option ideas

0. ``` js
1.   const request = useFetch({
2.     graphql: {
3.       // all options can also be put in here
4.       // to overwrite those of `useFetch` for
5.       // `useMutation` and `useQuery`
6.     },
7.     // by default this is true, but if set to false
8.     // then we default to the responseType array of trying 'json' first, then 'text', etc.
9.     // hopefully I get some answers on here: https://bit.ly/3afPlJS
10.     responseTypeGuessing: true,
11. 
    
12.     // Allows you to pass in your own cache to useFetch
13.     // This is controversial though because `cache` is an option in the requestInit
14.     // and it's value is a string. See: https://developer.mozilla.org/en-US/docs/Web/API/Request/cache
15.     // One possible solution is to move the default `fetch`'s `cache` to `cachePolicy`.
16.     // I don't really like this solution though.
17.     // Another solution is to only allow the `cache` option with the ``
18.     cache: new Map(),
19.     // these will be the exact same ones as Apollo's
20.     cachePolicy: 'cache-and-network', 'network-only', 'cache-only', 'no-cache' // 'cache-first'
21.     // potential idea to fetch on server instead of just having `loading` state. Not sure if this is a good idea though
22.     onServer: true,
23.     onSuccess: (/* idk what to put here */) => {},
24.     // if you would prefer to pass the query in the config
25.     query: `some graphql query`
26.     // if you would prefer to pass the mutation in the config
27.     mutation: `some graphql mutation`
28.     refreshWhenHidden: false,
29.   })
30. 
    
31. 
    
32.   // potential for causing a rerender after clearing cache if needed
33.   request.cache.clear(true)
34. ```

- [ ] potential option ideas for GraphQL

0. ``` js
1.   const request = useQuery({ onMount: true })`your graphql query`
2. 
   
3.   const request = useFetch(...)
4.   const userID = 'some-user-uuid'
5.   const res = await request.query({ userID })`
6.     query Todos($userID string!) {
7.       todos(userID: $userID) {
8.         id
9.         title
10.       }
11.     }
12.   `
13. ```

- [ ] make code editor plugin/package/extension that adds GraphQL syntax highlighting for useQuery and useMutation 😊

- [ ] add React Native test suite

[1]: https://github.com/ava/use-http/issues/new?title=[Feature%20Request]%20YOUR_FEATURE_NAME

[2]: https://github.com/ava/use-http/issues/93#issuecomment-600896722

[3]: https://github.com/ava/use-http/raw/master/public/dog.png

[4]: https://reactjs.org/docs/javascript-environment-requirements.html

[5]: https://use-http.com

[react-app-polyfill]: https://www.npmjs.com/package/react-app-polyfill