ava/use-http

1. this removes the `path` and `url` fields in exchange for the 1st argument handling both. https://github.com/ava/use-http/issues/247 🚨 BREAKING 🚨 ```js useFetch('/path') // AND useFetch('https://overwrite-global-url.com') ``` 2. Fixes issue when overwriting global options, it changes for every instance of useFetch. https://github.com/ava/use-http/issues/250 3. fixes the pagination issue here https://github.com/ava/use-http/issues/237 but might not fix the `loading` bug. 4. small bug fix with `responseType`

Finally Version 1.0 ============= Lots of upgrades in this version. This new major release is `v1.0.2` on npm. Updates --------- 1. Retry Functionality. `retries`, `retryDelay`, and `retryOn` [](https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9) [](https://www.youtube.com/watch?v=grE3AX-Q9ss&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=9) 2. Suspense^{(experimental)} Support. `suspense` [](https://codesandbox.io/s/usefetch-suspense-i22wv) [](https://www.youtube.com/watch?v=7qWLJUpnxHI&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=2&t=0s) 3. Persistent Caching. `persist` [](https://www.youtube.com/watch?v=pJ22Rq9c8mw&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=7) 4. Added `cache` to return of `useFetch` for better cache debugging and to clear the cache for instance when a user signs out. [](https://www.youtube.com/watch?v=pJ22Rq9c8mw&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=7) 5. Fixed infinite loop/extra rendering issues when passing useFetch variables to useEffect dependencies https://github.com/ava/use-http/issues/228 https://github.com/ava/use-http/issues/185 [](https://codesandbox.io/s/usefetch-request-response-managed-state-ruyi3?file=/src/index.js) [](https://www.youtube.com/watch?v=_-GujYZFCKI&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=6) 6. Fixed `response interceptor` not firing when results loaded from cache https://github.com/ava/use-http/issues/235 7. Can now have `[]` and `''` as body of http request. Caveat, if posting a string as the body, must have a route `post('/', 'your body')` 8. Added `async` support for `interceptors.response` https://github.com/ava/use-http/issues/214 9. Remove `content-type: application/json` when posting formData https://github.com/ava/use-http/issues/213 10. Promise.all fixes https://github.com/ava/use-http/issues/211 11. Fixed `cannot perform update on unmounted component` bug https://github.com/ava/use-http/issues/207 12. Should now work in TypeScript apps made using parcel https://github.com/ava/use-http/issues/202 13. Lot's of videos added! [](https://www.youtube.com/playlist?list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW)

Abort ------- In this release, we've added abort functionality. Now you can call abort on any http request and it will cancel it. We decided not to allow aborting multiple requests at once. If the community decides that this is a feature we need to add, we will add it. If you want that, please comment on the [Feature request and syntax ideas](https://github.com/alex-cory/use-http/issues/13) issue. <img src="https://github.com/alex-cory/use-http/blob/master/public/abort-example-1.gif" width="900" /> ```jsx const githubRepos = useFetch({ baseUrl: `https://api.github.com/search/repositories?q=` }) // the line below is not isomorphic, but for simplicity we're using the browsers `encodeURI` const searchGithubRepos = e => githubRepos.get(encodeURI(e.target.value)) <> <input onChange={searchGithubRepos} /> <button onClick={githubRepos.abort}>Abort</button> {githubRepos.loading ? 'Loading...' : githubRepos.data.items.map(repo => ( <div key={repo.id}>{repo.name}</div> ))} </> ```

Changing the original behavior from only fetching on mount to whenever you want. Previous behavior: ```js import useFetch from 'use-http' function App() { // add whatever other options you would add to `fetch` such as headers const options = { method: 'POST', body: {}, // whatever data you want to send } var [data, loading, error] = useFetch('https://example.com', options) // want to use object destructuring? You can do that too var { data, loading, error } = useFetch('https://example.com', options) if (error) return 'Error!' if (loading) return 'Loading!' return ( <code> <pre>{data}</pre> </code> ) } ``` this would only work when the component first rendered. Now we can do ```js import useFetch from 'use-http' function App() { // add whatever other options you would add to `fetch` such as headers const options = {} var [data, loading, error, request] = useFetch('https://example.com', options) // want to use object destructuring? You can do that too var { data, loading, error, request, get, post, patch, put, del } = useFetch('https://example.com') const postData = () => { post({ no: 'way', }) // OR request.post({ no: 'way', }) } if (error) return 'Error!' if (loading) return 'Loading!' return ( <> <button onClick={postData}>Post Some Data</button> <code> <pre>{data}</pre> </code> </> ) } ``` There's also support for ```js var [data, loading, error, request] = useFetch({ onMount: true, // will fire on componentDidMount baseUrl: 'https://example.com' }) const handleClick = () => { request.post('/todos', { id: 'someID', text: 'this is what my todo is' }) } ``` And don't forget ```js var { data, loading, error, patch } = usePatch({ url: 'https://example.com', headers: { 'Content-type': 'application/json; charset=UTF-8' } }) ```