HTTP Calls and Mock APIs

- [ ] [My HTTP Call checklist](https://twitter.com/housecor/status/1256025005470728195). Can implement [fetch timeout like this](https://twitter.com/goenning/status/1781290404211814903)
- [ ] Pick a lib: fetch, Axios, [ky](https://github.com/sindresorhus/ky), [wrench](https://github.com/elbywan/wretch), [unfetch](https://www.npmjs.com/package/unfetch)
- [ ] [swr](https://swr.now.sh/) vs [react-query](https://github.com/tannerlinsley/react-query)
- [ ] Timeouts
- [Fetch](https://stackoverflow.com/questions/46946380/fetch-api-request-timeout)
- Built into [ky](https://github.com/sindresorhus/ky)
- Axios - See example using a ref [in point 10 here](https://dev.to/jsmanifest/14-beneficial-tips-to-write-cleaner-code-in-react-apps-1gcf)
- [ ] [Using Swagger or OpenAPI? Generate hooks via restful-react](https://github.com/contiamo/restful-react#code-generation)
- [ ] See [Modern JavaScript](https://github.com/coryhouse/reactjsconsulting/issues/4) under Async patterns for basics on promises and async/await such as error handling and promise.race.

# Mock APIs

[My Twitter thread](https://twitter.com/housecor/status/1256242384075198472)

| Tool | API | DB | Data integrity | Real HTTP Requests | Setup |
| --- | --- | --- | --- | --- | --- |
| [json-server](https://github.com/typicode/json-server) | Real (Express) | lowDb | Your job | Yes | Declare db.json, call mock base URL |
| [Mirage](https://miragejs.com/)| Mock HTTP | In memory w/ORM | Yes | No | Declare routes, seed db in server object |
| [msw](https://redd.gitbook.io/msw) | Trap HTTP via SW | No, see mswjs/data or save in-memory variables | No | Yes | |

- [json-server Demo](https://github.com/coryhouse/mock-api-example), and [can be hosted easily on tools like Glitch](https://glitch.com/edit/#!/phantom-tender-college?path=db.json%3A12%3A5)
- [Mirage REPL example](https://miragejs.com/repl/?config=Ly8gVHJ5IHByZXNzaW5nIFNlbmQgb3ZlciB0aGVyZSA9PiAKaW1wb3J0IHsgU2VydmVyLCBNb2RlbCwgYmVsb25nc1RvIH0gZnJvbSAibWlyYWdlanMiCgpleHBvcnQgZGVmYXVsdCBuZXcgU2VydmVyKHsKICAvLyBUaGlzIHNldHMgdXAgYSBvbmUtdG8tbWFueSBiZXR3ZWVuIHVzZXJzIGFuZCBtZXNzYWdlcwogIG1vZGVsczogewogICAgdXNlcjogTW9kZWwsCiAgICBtZXNzYWdlOiBNb2RlbC5leHRlbmQoewogICAgICB1c2VyOiBiZWxvbmdzVG8oKSwKICAgIH0pLAogIH0sCgogIC8vIFRoaXMgc2VlZHMgTWlyYWdlJ3MgZGF0YWJhc2UKICBzZWVkcyhzZXJ2ZXIpIHsKICAgIHNlcnZlci5jcmVhdGUoInVzZXIiLCB7IG5hbWU6ICJDb3J5IiB9KQogICAgc2VydmVyLmNyZWF0ZSgidXNlciIsIHsgbmFtZTogIlJ5YW4iIH0pCiAgICBzZXJ2ZXIuY3JlYXRlKCJ1c2VyIiwgeyBuYW1lOiAiU2FtIiB9KQogIH0sCgogIHJvdXRlcygpIHsKICAgIC8vIFRoaXMgcmVzb3VyY2UgaGVscGVyIHNjYWZmb2xkcyBvdXQgNSBSRVNUZnVsIHJvdXRlczoKICAgIC8vIEdFVCAvdXNlcnMKICAgIC8vIEdFVCAvdXNlcnMvOmlkCiAgICAvLyBQT1NUIC91c2VycwogICAgLy8gUEFUQ0ggL3VzZXJzLzppZAogICAgLy8gREVMIC91c2Vycy86aWQKICAgIAogICAgLy8gUmlnaHQgbm93IHRoaXMgUkVQTCBkb2Vzbid0IHN1cHBvcnQgYSByZXF1ZXN0IGJvZHkgZm9yIFBBVENIL1BPU1QKICAgIC8vIGJ1dCB5b3UgY2FuIHRyeSBHRVQgYW5kIERFTCEKICAgIAogICAgLy8gQW5kIGNsaWNrIHRoZSBEYXRhYmFzZSB0YWIgYWJvdmUgdG8gYnJvd3NlIHRoZSBkYXRhLgogICAgdGhpcy5yZXNvdXJjZSgidXNlciIpCiAgfSwKfSk%3D&url=users)

Other mocking tools:
https://github.com/outbrain/Leonardo
https://mockoon.com/
https://www.smockin.com/

## MSW tips:

- To simulate a db, just mutate the array in memory. Simple. Example: https://github.com/coryhouse/advisors-excel-music/blob/main/src/mocks/handlers.ts#L19
- Consider https://github.com/mswjs/data for db
- For dynamic responses, try [use](https://twitter.com/ApiMocking/status/1772624698624327954) to prepend responses. Or, [use search params](https://mswjs.io/docs/best-practices/dynamic-mock-scenarios/) and see [here](https://cathalmacdonnacha.com/mocking-error-empty-and-loading-states-with-msw) for more details. I also [tweeted here](https://twitter.com/housecor/status/1772621806563721444). Or [check out how it's done at DiscordKit](https://twitter.com/saeris/status/1772871197564207303)