{"id":30220928,"url":"https://github.com/soyelmoreno/react-fetching-data","last_synced_at":"2026-04-13T12:01:53.927Z","repository":{"id":307919969,"uuid":"1031082668","full_name":"soyelmoreno/react-fetching-data","owner":"soyelmoreno","description":"Following along with tutorial: Fetching Data in React","archived":false,"fork":false,"pushed_at":"2025-08-03T18:36:53.000Z","size":52,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-14T09:29:04.517Z","etag":null,"topics":["abort-controller","data-fetching","react","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/soyelmoreno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-03T01:06:58.000Z","updated_at":"2025-08-03T18:36:56.000Z","dependencies_parsed_at":"2025-08-03T20:35:55.766Z","dependency_job_id":null,"html_url":"https://github.com/soyelmoreno/react-fetching-data","commit_stats":null,"previous_names":["soyelmoreno/abort-controller","soyelmoreno/react-fetching-data"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/soyelmoreno/react-fetching-data","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soyelmoreno%2Freact-fetching-data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soyelmoreno%2Freact-fetching-data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soyelmoreno%2Freact-fetching-data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soyelmoreno%2Freact-fetching-data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soyelmoreno","download_url":"https://codeload.github.com/soyelmoreno/react-fetching-data/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soyelmoreno%2Freact-fetching-data/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31751705,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T09:16:15.125Z","status":"ssl_error","status_checked_at":"2026-04-13T09:16:05.023Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["abort-controller","data-fetching","react","tailwindcss","typescript"],"created_at":"2025-08-14T09:12:19.720Z","updated_at":"2026-04-13T12:01:53.915Z","avatar_url":"https://github.com/soyelmoreno.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fetching Data in React\n\nFollowing along with these tutorials:\n\n[Fetching Data in React - Complete\nTutorial](https://www.youtube.com/watch?v=00lxm_doFYw)\n\n[Modern Data Fetching in React (Complete\nGuide)](https://www.youtube.com/watch?v=MBlZ8Wzkbi4)\n\nby Cosden Solutions\n\n## Approach 1: Manual\n\nFirst there is a \"manual\" data fetching example, i.e., we handle these things\nourselves:\n\n- fetching\n- isLoading\n- error\n- abort controller\n\nA library like React Query will handle all of this for us. The purpose of this\nexercise is to gain familiarity with the low-level operations so we can\nunderstand what React Query is doing for us.\n\nThe big new thing here is the [JavaScript AbortController\nAPI](https://developer.mozilla.org/en-US/docs/Web/API/AbortController). It\nprovides a mechanism to abort ongoing asynchronous operations such as network\nrequests. This lets us prevent race conditions.\n\nFor example, if the user loads posts, then quickly loads the next page of posts,\nand the first request gets delayed, and the second page loads quickly...we don't\nwant the posts loaded by the second request to be clobbered when the first\nrequest finally comes back. So for every request, we can first abort any\nprevious request.\n\n## Approach 2: React Query\n\nThen there is a \"modern\" data fetching example. We use React Query to handle all\nthese things for us.\n\n## Approach 3: Server Component\n\nThere is also a \"server\" example, using a React Server Component wrapped in a\n`\u003cSuspense\u003e`. But I couldn't get it because I don't have a server component\nframework running (like Next.js).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoyelmoreno%2Freact-fetching-data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoyelmoreno%2Freact-fetching-data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoyelmoreno%2Freact-fetching-data/lists"}