Skip to content

Commit 35d99b1

Browse files
alex-coryalex-cory
authored
Videos (#239)
* v0.4.4 * v0.4.5 * v1.0.0 * v1.0.1 * added video buttons * updating video button png * added codesandbox links + youtube links to all examples * making sure all codesandbox buttons are same size * changed from skyblue `codesandbox` to blue `example` * added new videos for `request + response (managed state)` * changed youtube links to be those of the useFetch playlist * commenting out stuff that isnt implemented yet
1 parent 02ab59e commit 35d99b1

File tree

4 files changed

+113
-61
lines changed

4 files changed

+113
-61
lines changed

‎README.md

+70-40
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,27 @@
99
<br />
1010

1111
<p align="center">
12-
<a href="https://github.com/ava/use-http/pulls">
13-
<img src="https://camo.githubusercontent.com/d4e0f63e9613ee474a7dfdc23c240b9795712c96/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5052732d77656c636f6d652d627269676874677265656e2e737667" />
14-
</a>
15-
<a href="https://circleci.com/gh/ava/use-http">
16-
<img src="https://img.shields.io/circleci/project/github/ava/use-http/master.svg" />
17-
</a>
18-
<a href="https://www.npmjs.com/package/use-http">
19-
<img src="https://img.shields.io/npm/dt/use-http.svg" />
20-
</a>
21-
<a href="https://lgtm.com/projects/g/ava/use-http/context:javascript">
22-
<img alt="undefined" src="https://img.shields.io/lgtm/grade/javascript/g/ava/use-http.svg?logo=lgtm&logoWidth=18"/>
23-
</a>
24-
<a href="http://packagequality.com/#?package=use-http">
25-
<img src="https://npm.packagequality.com/shield/use-http.svg" />
26-
</a>
27-
<a href="https://standardjs.com">
28-
<img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" />
29-
</a>
12+
<a href="https://github.com/ava/use-http/pulls">
13+
<img src="https://camo.githubusercontent.com/d4e0f63e9613ee474a7dfdc23c240b9795712c96/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5052732d77656c636f6d652d627269676874677265656e2e737667" />
14+
</a>
15+
<a href="https://circleci.com/gh/ava/use-http">
16+
<img src="https://img.shields.io/circleci/project/github/ava/use-http/master.svg" />
17+
</a>
18+
<a href="https://www.npmjs.com/package/use-http">
19+
<img src="https://img.shields.io/npm/dt/use-http.svg" />
20+
</a>
21+
<a href="https://lgtm.com/projects/g/ava/use-http/context:javascript">
22+
<img alt="undefined" src="https://img.shields.io/lgtm/grade/javascript/g/ava/use-http.svg?logo=lgtm&logoWidth=18"/>
23+
</a>
24+
<a href="http://packagequality.com/#?package=use-http">
25+
<img src="https://npm.packagequality.com/shield/use-http.svg" />
26+
</a>
27+
<a href="https://standardjs.com">
28+
<img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" />
29+
</a>
30+
<a href="https://www.youtube.com/channel/UCbQDX3YQJcQcISK_oyyYP6A">
31+
<img src="https://img.shields.io/badge/youtube-subscribe-RED.svg" />
32+
</a>
3033

3134
<!-- [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/next-js) -->
3235
<!-- <a href="https://bundlephobia.com/result?p=use-http">
@@ -83,17 +86,20 @@ Features
8386
Usage
8487
-----
8588

86-
### Examples
87-
<ul>
88-
<li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-in-nextjs-nn9fm'>useFetch - Next.js</a></li>
89-
<li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/embed/km04k9k9x5'>useFetch - create-react-app</a></li>
90-
<li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-with-provider-c78w2'>useFetch + Provider</a></li>
91-
<li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-suspense-i22wv'>useFetch + Suspense</a></li>
92-
<li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-provider-pagination-exttg'>useFetch + Pagination + Provider</a></li>
93-
<li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-provider-requestresponse-interceptors-s1lex'>useFetch + Request/Response Interceptors + Provider</a></li>
94-
<li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9'>useFetch + retryOn, retryDelay</a></li>
95-
<li><a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/graphql-usequery-provider-uhdmj'>useQuery - GraphQL</a></li>
96-
</ul>
89+
### Examples + Videos
90+
91+
- useFetch - managed state, request, response, etc. [![](https://img.shields.io/badge/example-blue.svg)](https://codesandbox.io/s/usefetch-request-response-managed-state-ruyi3?file=/src/index.js) [![](https://img.shields.io/badge/video-red.svg)](https://www.youtube.com/watch?v=gtEwjpXbSik&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
92+
- useFetch - route, path, Provider, etc. [![](https://img.shields.io/badge/example-blue.svg)](https://codesandbox.io/s/usefetch-with-provider-c78w2) [![](https://img.shields.io/badge/video-red.svg)](https://www.youtube.com/watch?v=33jqbLlQm3g&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
93+
- useFetch - request/response interceptors [![](https://img.shields.io/badge/example-blue.svg)](https://codesandbox.io/s/usefetch-provider-requestresponse-interceptors-s1lex) [![](https://img.shields.io/badge/video-red.svg)](https://www.youtube.com/watch?v=2xSQm_OYprc&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
94+
- useFetch - retries, retryOn, retryDelay [![](https://img.shields.io/badge/example-blue.svg)](https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9) [![](https://img.shields.io/badge/video-red.svg)](https://www.youtube.com/watch?v=Y9zJwzR0vTg&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
95+
- useFetch - abort, timeout, onAbort, onTimeout [![](https://img.shields.io/badge/video-red.svg)](https://www.youtube.com/watch?v=X9X9niivp-0&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
96+
- useFetch - persist, cache [![](https://img.shields.io/badge/video-red.svg)](https://www.youtube.com/watch?v=EWd3ekEypM8&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
97+
- useFetch - cacheLife, cachePolicy [![](https://img.shields.io/badge/video-red.svg)](https://www.youtube.com/watch?v=-8vq5VGMGnA&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
98+
- useFetch - suspense <sup>(experimental)</sup> [![](https://img.shields.io/badge/example-blue.svg)](https://codesandbox.io/s/usefetch-suspense-i22wv) [![](https://img.shields.io/badge/video-red.svg)](https://www.youtube.com/watch?v=MbWizFdJBoE&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i)
99+
- useFetch - pagination [![](https://img.shields.io/badge/example-blue.svg)](https://codesandbox.io/s/usefetch-provider-pagination-exttg) [![](https://img.shields.io/badge/video-red.svg)](https://www.youtube.com/watch?v=s-r6x1WrMns&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i&index=9)
100+
- useQuery - GraphQL [![](https://img.shields.io/badge/example-blue.svg)](https://codesandbox.io/s/graphql-usequery-provider-uhdmj)
101+
- useFetch - Next.js [![](https://img.shields.io/badge/example-blue.svg)](https://codesandbox.io/s/usefetch-in-nextjs-nn9fm)
102+
- useFetch - create-react-app [![](https://img.shields.io/badge/example-blue.svg)](https://codesandbox.io/embed/km04k9k9x5)
97103

98104
<details open><summary><b>Basic Usage (managed state) <code>useFetch</code></b></summary>
99105

@@ -136,6 +142,9 @@ function Todos() {
136142
)
137143
}
138144
```
145+
146+
<a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-request-response-managed-state-ruyi3?file=/src/index.js'><img width='150px' height='30px' src='https://codesandbox.io/static/img/play-codesandbox.svg' /></a> <a target="_blank" rel="noopener noreferrer" href='https://www.youtube.com/watch?v=gtEwjpXbSik&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a>
147+
139148
</details>
140149
141150
<details><summary><b>Basic Usage (auto managed state) <code>useFetch</code></b></summary>
@@ -164,6 +173,10 @@ function Todos() {
164173
)
165174
}
166175
```
176+
177+
<!-- TODO: codesandbox + youtube -->
178+
<!-- <a target="_blank" rel="noopener noreferrer" href='XXXXXX'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a> -->
179+
167180
</details>
168181
169182
@@ -196,7 +209,9 @@ const App = () => (
196209
)
197210
```
198211
199-
[![Edit Basic Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/usefetch-with-provider-c78w2)
212+
<!-- TODO: youtube -->
213+
<a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-provider-requestresponse-interceptors-s1lex?file=/src/index.js'><img width='150px' height='30px' src='https://codesandbox.io/static/img/play-codesandbox.svg' /></a>
214+
<!-- <a target="_blank" rel="noopener noreferrer" href='XXXXXXX'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a> -->
200215
201216
</details>
202217
@@ -231,7 +246,7 @@ function App() {
231246
}
232247
```
233248
234-
[![Edit Basic Example](https://codesandbox.io/static/img/play-codesandbox.svg)]()
249+
<a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-suspense-i22wv'><img width='150px' height='30px' src='https://codesandbox.io/static/img/play-codesandbox.svg' /></a> <a target="_blank" rel="noopener noreferrer" href='https://www.youtube.com/watch?v=MbWizFdJBoE&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a>
235250
236251
</details>
237252
@@ -274,8 +289,6 @@ function App() {
274289
}
275290
```
276291
277-
[![Edit Basic Example](https://codesandbox.io/static/img/play-codesandbox.svg)]()
278-
279292
</details>
280293
281294
<div align="center">
@@ -340,13 +353,14 @@ const App = () => (
340353
)
341354
```
342355
343-
[![Edit Basic Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/usefetch-provider-pagination-exttg)
356+
<a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-provider-pagination-exttg?file=/src/index.js'><img width='150px' height='30px' src='https://codesandbox.io/static/img/play-codesandbox.svg' /></a> <a target="_blank" rel="noopener noreferrer" href='https://www.youtube.com/watch?v=s-r6x1WrMns&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i&index=9'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a>
357+
344358
345359
</details>
346360
347361
<details open><summary><b>Destructured <code>useFetch</code></b></summary>
348362
349-
⚠️ 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`. ️️⚠️
363+
⚠️ 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`. ️️⚠️
350364
351365
```js
352366
var [request, response, loading, error] = useFetch('https://example.com')
@@ -409,6 +423,8 @@ var {
409423
} = request
410424
```
411425
426+
<a target="_blank" rel="noopener noreferrer" href='https://www.youtube.com/watch?v=gtEwjpXbSik&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a>
427+
412428
</details>
413429
414430
@@ -424,8 +440,10 @@ request.post('/todos', {
424440
no: 'way'
425441
})
426442
```
427-
</details>
428443
444+
<a target="_blank" rel="noopener noreferrer" href='https://www.youtube.com/watch?v=33jqbLlQm3g&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a>
445+
446+
</details>
429447
430448
<details><summary><b>Abort <code>useFetch</code></b></summary>
431449
@@ -448,6 +466,9 @@ const searchGithubRepos = e => githubRepos.get(encodeURI(e.target.value))
448466
))}
449467
</>
450468
```
469+
470+
<a target="_blank" rel="noopener noreferrer" href='https://www.youtube.com/watch?v=X9X9niivp-0&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a>
471+
451472
</details>
452473
453474
@@ -544,7 +565,9 @@ export default function QueryComponent() {
544565
)
545566
}
546567
```
547-
[![Edit Basic Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/graphql-usequery-provider-uhdmj)
568+
569+
<a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/graphql-usequery-provider-uhdmj'><img width='150px' height='30px' src='https://codesandbox.io/static/img/play-codesandbox.svg' /></a>
570+
548571

549572
##### Add a new todo
550573
```jsx
@@ -649,7 +672,9 @@ function App() {
649672
}
650673

651674
```
652-
[![Edit Basic Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/usefetch-provider-requestresponse-interceptors-s1lex)
675+
676+
<a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-provider-requestresponse-interceptors-s1lex'><img width='150px' height='30px' src='https://codesandbox.io/static/img/play-codesandbox.svg' /></a> <a target="_blank" rel="noopener noreferrer" href='https://www.youtube.com/watch?v=2xSQm_OYprc&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a>
677+
653678
</details>
654679
655680
<details id='form-data'><summary><b>File Uploads (FormData)</b></summary>
@@ -709,7 +734,9 @@ const App = () => {
709734
)
710735
}
711736
```
712-
[![Edit Basic Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/usefetch-different-response-types-c6csw)
737+
738+
<a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-different-response-types-c6csw'><img width='150px' height='30px' src='https://codesandbox.io/static/img/play-codesandbox.svg' /></a>
739+
<!-- <a target="_blank" rel="noopener noreferrer" href='XXXXXX'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a> -->
713740
714741
</details>
715742
@@ -792,7 +819,7 @@ const TestRetry = () => {
792819
}
793820
```
794821
795-
[![Edit Basic Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9)
822+
<a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9'><img width='150px' height='30px' src='https://codesandbox.io/static/img/play-codesandbox.svg' /></a> <a target="_blank" rel="noopener noreferrer" href='https://www.youtube.com/watch?v=Y9zJwzR0vTg&list=PLZIwrWkE9rCfYafpuEkF6swOtiqRX5r9i'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a>
796823
797824
</details>
798825
@@ -1012,6 +1039,9 @@ Todos
10121039
// by attempting to extract it via these body interface
10131040
// methods, one by one in this order
10141041
responseType: ['json', 'text', 'blob', 'formData', 'arrayBuffer'],
1042+
// by default this is true, but if set to false
1043+
// then we default to the responseType array of trying 'json' first, then 'text', etc.
1044+
responseTypeGuessing: true,
10151045
// ALSO, maybe there's a way to guess the proper `body interface method` for the correct response content-type.
10161046
// here's a stackoverflow with someone who's tried: https://bit.ly/2X8iaVG
10171047

0 commit comments

Comments
 (0)