@@ -340,13 +353,14 @@ const App = () => (
)
```
-[](https://codesandbox.io/s/usefetch-provider-pagination-exttg)
+
+
Destructured useFetch
-⚠️ Do not destructure the `response` object! 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`. ️️⚠️
+⚠️ Do not destructure the `response` object! Details in [this video](https://youtu.be/gtEwjpXbSik?list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i&t=131). 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`. ️️⚠️
```js
var [request, response, loading, error] = useFetch('https://example.com')
@@ -409,6 +423,8 @@ var {
} = request
```
+
+
@@ -424,8 +440,10 @@ request.post('/todos', {
no: 'way'
})
```
-
+
+
+
Abort useFetch
@@ -448,6 +466,9 @@ const searchGithubRepos = e => githubRepos.get(encodeURI(e.target.value))
))}
```
+
+
+
@@ -544,7 +565,9 @@ export default function QueryComponent() {
)
}
```
-[](https://codesandbox.io/s/graphql-usequery-provider-uhdmj)
+
+
+
##### Add a new todo
```jsx
@@ -649,7 +672,9 @@ function App() {
}
```
-[](https://codesandbox.io/s/usefetch-provider-requestresponse-interceptors-s1lex)
+
+
+
File Uploads (FormData)
@@ -709,7 +734,9 @@ const App = () => {
)
}
```
-[](https://codesandbox.io/s/usefetch-different-response-types-c6csw)
+
+
+
@@ -792,7 +819,7 @@ const TestRetry = () => {
}
```
-[](https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9)
+
@@ -1012,6 +1039,9 @@ Todos
// by attempting to extract it via these body interface
// methods, one by one in this order
responseType: ['json', 'text', 'blob', 'formData', 'arrayBuffer'],
+ // by default this is true, but if set to false
+ // then we default to the responseType array of trying 'json' first, then 'text', etc.
+ responseTypeGuessing: true,
// ALSO, maybe there's a way to guess the proper `body interface method` for the correct response content-type.
// here's a stackoverflow with someone who's tried: https://bit.ly/2X8iaVG
diff --git a/docs/README.md b/docs/README.md
index ff996b30..0a891740 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -30,7 +30,10 @@
- 
+
+
+
+ 
@@ -60,17 +63,21 @@ Features
- Suspense
(experimental) support
- Retry functionality
-Examples
+Examples + Videos
=========
--
useFetch + Next.js
--
useFetch + create-react-app
--
useFetch + Provider
--
useFetch + Suspense
--
useFetch + Pagination + Provider
--
useFetch + Request/Response Interceptors + Provider
--
useFetch + retryOn, retryDelay
--
useQuery - GraphQL
+- useFetch - managed state, request, response, etc. [](https://codesandbox.io/s/usefetch-request-response-managed-state-ruyi3?file=/src/index.js) [](https://www.youtube.com/watch?v=gtEwjpXbSik&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
+- useFetch - route, path, Provider, etc. [](https://codesandbox.io/s/usefetch-with-provider-c78w2) [](https://www.youtube.com/watch?v=33jqbLlQm3g&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
+- useFetch - request/response interceptors [](https://codesandbox.io/s/usefetch-provider-requestresponse-interceptors-s1lex) [](https://www.youtube.com/watch?v=2xSQm_OYprc&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
+- useFetch - retries, retryOn, retryDelay [](https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9) [](https://www.youtube.com/watch?v=Y9zJwzR0vTg&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
+- useFetch - abort, timeout, onAbort, onTimeout [](https://www.youtube.com/watch?v=X9X9niivp-0&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
+- useFetch - persist, cache [](https://www.youtube.com/watch?v=EWd3ekEypM8&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
+- useFetch - cacheLife, cachePolicy [](https://www.youtube.com/watch?v=-8vq5VGMGnA&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
+- useFetch - suspense
(experimental) [](https://codesandbox.io/s/usefetch-suspense-i22wv) [](https://www.youtube.com/watch?v=MbWizFdJBoE&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
+- useFetch - pagination [](https://codesandbox.io/s/usefetch-provider-pagination-exttg) [](https://www.youtube.com/watch?v=s-r6x1WrMns&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i&index=9)
+- useQuery - GraphQL [](https://codesandbox.io/s/graphql-usequery-provider-uhdmj)
+- useFetch - Next.js [](https://codesandbox.io/s/usefetch-in-nextjs-nn9fm)
+- useFetch - create-react-app [](https://codesandbox.io/embed/km04k9k9x5)
Installation
=============
@@ -135,6 +142,9 @@ function Todos() {
}
```
+
+
+
Managed State Usage
-------------------
@@ -178,6 +188,8 @@ function Todos() {
}
```
+
+
Basic Usage With Provider (auto managed state)
---------------------------------------------
@@ -208,7 +220,10 @@ const App = () => (
)
```
-[](https://codesandbox.io/s/usefetch-with-provider-c78w2)
+
+
+
+
Suspense Mode (auto managed state)
----------------------------------
@@ -240,7 +255,7 @@ function App() {
}
```
-[]()
+
Suspense Mode (managed state)
-----------------------------
@@ -283,8 +298,6 @@ function App() {
}
```
-[]()
-
Pagination With Provider
---------------------------
@@ -321,12 +334,12 @@ const App = () => (
)
```
-[](https://codesandbox.io/s/usefetch-provider-pagination-exttg)
+
Destructured
-------------
-⚠️ Do not destructure the `response` object! 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`. ️️⚠️
+⚠️ Do not destructure the `response` object! Details in [this video](https://youtu.be/gtEwjpXbSik?list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i&t=131). 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`. ️️⚠️
```js
var [request, response, loading, error] = useFetch('https://example.com')
@@ -404,6 +417,8 @@ request.post('/todos', {
})
```
+
+
Abort
-----
@@ -426,6 +441,8 @@ const searchGithubRepos = e => githubRepos.get(encodeURI(e.target.value))
```
+
+
Request/Response Interceptors with `Provider`
---------------------------------------------
@@ -469,7 +486,7 @@ function App() {
```
-[](https://codesandbox.io/s/usefetch-provider-requestresponse-interceptors-s1lex)
+
File Upload (FormData)
----------------------
@@ -530,7 +547,8 @@ const App = () => {
}
```
-[](https://codesandbox.io/s/usefetch-different-response-types-c6csw)
+
+
Overwrite/Remove Options/Headers Set in Provider
------------------------------------------------
@@ -573,6 +591,8 @@ const App = () => {
}
```
+
+
Retries
-------
@@ -611,7 +631,7 @@ const TestRetry = () => {
}
```
-[](https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9)
+
GraphQL Query
---------------
@@ -703,7 +723,7 @@ function QueryComponent() {
}
```
-[](https://codesandbox.io/s/graphql-usequery-provider-uhdmj)
+
useMutation (add a new todo)
-------------------
@@ -882,6 +902,8 @@ useFetch(options)
```
+
+
Who's using use-http?
=====================
diff --git a/package.json b/package.json
index 265ce506..b94d5e2d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "use-http",
- "version": "1.0.0",
+ "version": "1.0.1",
"homepage": "http://use-http.com",
"main": "dist/index.js",
"license": "MIT",
diff --git a/public/watch-youtube-video.png b/public/watch-youtube-video.png
index c4dbde04..260091c2 100644
Binary files a/public/watch-youtube-video.png and b/public/watch-youtube-video.png differ
-
-
- 
-
-
- 
-
-
- 
-
-
-