{"id":13880717,"url":"https://github.com/BetterTyped/hyper-fetch","last_synced_at":"2025-07-16T17:31:02.111Z","repository":{"id":39741776,"uuid":"420032474","full_name":"BetterTyped/hyper-fetch","owner":"BetterTyped","description":"⚡ Fetching and realtime data exchange framework.","archived":false,"fork":false,"pushed_at":"2025-07-13T14:59:29.000Z","size":279070,"stargazers_count":1078,"open_issues_count":3,"forks_count":27,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-13T15:10:57.968Z","etag":null,"topics":["ajax","builder","cache","data-exchange","fetch","firebase","graphql","javascript","nextjs","offline","persistence","query","react","realtime","sockets","sse","swr","typescript","websockets","xhr"],"latest_commit_sha":null,"homepage":"https://hyperfetch.bettertyped.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BetterTyped.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"Contributing.md","funding":".github/FUNDING.yml","license":"License.md","code_of_conduct":"Code_of_Conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["prc5"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2021-10-22T09:02:45.000Z","updated_at":"2025-07-13T14:20:24.000Z","dependencies_parsed_at":"2025-04-10T18:50:55.629Z","dependency_job_id":"7275970b-12a8-4042-851d-0bf1714b497c","html_url":"https://github.com/BetterTyped/hyper-fetch","commit_stats":{"total_commits":646,"total_committers":10,"mean_commits":64.6,"dds":0.5061919504643964,"last_synced_commit":"3f01c37e0788ea00eae9456e0746a468da91d5ac"},"previous_names":[],"tags_count":443,"template":false,"template_full_name":null,"purl":"pkg:github/BetterTyped/hyper-fetch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetterTyped%2Fhyper-fetch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetterTyped%2Fhyper-fetch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetterTyped%2Fhyper-fetch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetterTyped%2Fhyper-fetch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BetterTyped","download_url":"https://codeload.github.com/BetterTyped/hyper-fetch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BetterTyped%2Fhyper-fetch/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265527544,"owners_count":23782480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["ajax","builder","cache","data-exchange","fetch","firebase","graphql","javascript","nextjs","offline","persistence","query","react","realtime","sockets","sse","swr","typescript","websockets","xhr"],"created_at":"2024-08-06T08:03:25.394Z","updated_at":"2025-07-16T17:30:57.101Z","avatar_url":"https://github.com/BetterTyped.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e\n\n\u003cimg src=\"./.github/assets/readme.png\" alt=\"Hyper Fetch\" /\u003e\n\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nFramework for fetching and realtime data exchange.\n\n**[Documentation](https://hyperfetch.bettertyped.com/) |\n[Quick Start](https://hyperfetch.bettertyped.com/docs/documentation/getting-started/quick-start) |\n[Guides](https://hyperfetch.bettertyped.com/docs/guides/Basic/Setup)**\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://bettertyped.com/\"\u003e\n    \u003cimg src=\"https://custom-icon-badges.demolab.com/static/v1?label=\u0026message=BetterTyped\u0026color=333\u0026logo=BT\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/BetterTyped/hyper-fetch\"\u003e\n    \u003cimg src=\"https://custom-icon-badges.demolab.com/github/stars/BetterTyped/hyper-fetch?logo=star\u0026color=brightgreen\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/BetterTyped/hyper-fetch/blob/main/License.md\"\u003e\n    \u003cimg src=\"https://custom-icon-badges.demolab.com/github/license/BetterTyped/hyper-fetch?logo=law\u0026color=blue\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/semantic-release/semantic-release\"\u003e\n    \u003cimg src=\"https://custom-icon-badges.demolab.com/badge/semver-commitzen-e10079?logo=semantic-release\u0026color=9146ff\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://api.codeclimate.com/v1/badges/eade9435e75ecea0c004/test_coverage\"\u003e\n    \u003cimg src=\"https://api.codeclimate.com/v1/badges/eade9435e75ecea0c004/test_coverage\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bestofjs.org/projects/hyper-fetch\" rel=\"nofollow\"\u003e\n    \u003cimg alt=\"Best of JS\" src=\"https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=BetterTyped%2Fhyper-fetch%26since=daily\" style=\"max-width: 100%;\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n**`Hyper Fetch`** is unique fetching and realtime data-exchange framework meticulously crafted to **prioritize\nsimplicity and efficiency**. Its **typesafe design** and **user-friendly interface** ensure a seamless integration\nexperience, whether you're working on the browser or the server. Next-generation features streamlines architecture\ncreation, grants access to the request lifecycle, and empowers rapid development of new components and functionalities,\nall while facilitating **real-time data exchange**.\n\n---\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/sponsors/prc5?tier=platinum\"\u003e\n\t\t\u003cpicture\u003e\n\t\t\t\u003cimg width=\"830\" src=\"https://raw.githubusercontent.com/prc5/sponsors/main/assets/Platinum.png\" alt=\"Premium sponsor banner\"/\u003e\n\t\t\u003c/picture\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/sponsors/prc5?tier=Platinum\"\u003e\n\t\t\u003cpicture\u003e\n\t\t\t\u003cimg width=\"830\" src=\"https://raw.githubusercontent.com/prc5/sponsors/main/packages/platinum/sponsorkit/sponsors.svg\" alt=\"Premium sponsor banner\"/\u003e\n\t\t\u003c/picture\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n## Key Features\n\n🔮 **Simple setup** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/basic/setup)\n\n🎯 **Easy cancellation** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/Advanced/Cancellation)\n\n✨ **Deduplicate similar requests** -\n[Read more](https://hyperfetch.bettertyped.com/docs/guides/advanced/deduplication/)\n\n🚀 **Queueing** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/advanced/queueing)\n\n💎 **Response Caching** - [Read more](https://hyperfetch.bettertyped.com/docs/documentation/core/cache)\n\n🔋 **Offline First** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/advanced/offline)\n\n📡 **Built-in fetcher** - [Read more](https://hyperfetch.bettertyped.com/docs/documentation/core/adapter)\n\n🎟 **Authentication** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/basic/authentication)\n\n🔁 **Smart Retries** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/basic/retries/)\n\n## Help me keep working on this project ❤️\n\n- [Become a Sponsor on GitHub](https://github.com/sponsors/prc5)\n\n## Installation\n\nThe easiest way to get the latest version of Hyper Fetch is to install it via yarn or npm.\n\n#### [Core](https://hyperfetch.bettertyped.com/docs/documentation/core/overview)\n\n```bash\nnpm install --save @hyper-fetch/core\nor\nyarn add @hyper-fetch/core\n```\n\n#### [Sockets](https://hyperfetch.bettertyped.com/docs/documentation/sockets/overview)\n\n```bash\nnpm install --save @hyper-fetch/sockets\nor\nyarn add @hyper-fetch/sockets\n```\n\n#### [React](https://hyperfetch.bettertyped.com/docs/documentation/react/overview)\n\n```bash\nnpm install --save @hyper-fetch/core @hyper-fetch/react\nor\nyarn add @hyper-fetch/core @hyper-fetch/react\n```\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/sponsors/prc5?tier=Gold\"\u003e\n\t\t\u003cpicture\u003e\n\t\t\t\u003cimg width=\"830\" src=\"https://raw.githubusercontent.com/prc5/sponsors/main/assets/Gold.png\" alt=\"Premium sponsor banner\"/\u003e\n\t\t\u003c/picture\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/sponsors/prc5?tier=gold\"\u003e\n\t\t\u003cpicture\u003e\n\t\t\t\u003cimg width=\"830\" src=\"https://raw.githubusercontent.com/prc5/sponsors/main/packages/gold/sponsorkit/sponsors.svg\" alt=\"Premium sponsor banner\"/\u003e\n\t\t\u003c/picture\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n## Packages\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003ePackage\u003c/th\u003e\n      \u003cth\u003eStats\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://github.com/BetterTyped/hyper-fetch/tree/main/packages/core\"\u003eHyper Fetch\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/core\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/dm/@hyper-fetch/core?logoColor=fff\u0026logo=trending-up\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/core\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/v/@hyper-fetch/core.svg?logo=npm\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/react\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/bundlephobia/minzip/@hyper-fetch/core?color=E10098\u0026logo=package\" /\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://github.com/BetterTyped/hyper-fetch/tree/main/packages/sockets\" \u003eSockets\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/sockets\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/dm/@hyper-fetch/sockets?logoColor=fff\u0026logo=trending-up\" /\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/sockets\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/v/@hyper-fetch/sockets.svg?logo=npm\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/sockets\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/bundlephobia/minzip/@hyper-fetch/sockets?color=E10098\u0026logo=package\" /\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://github.com/BetterTyped/hyper-fetch/tree/main/packages/react\" \u003eReact \u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/react\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/dm/@hyper-fetch/react?logoColor=fff\u0026logo=trending-up\" /\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/react\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/v/@hyper-fetch/react.svg?logo=npm\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/react\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/bundlephobia/minzip/@hyper-fetch/react?color=E10098\u0026logo=package\" /\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://github.com/BetterTyped/hyper-fetch/tree/main/packages/adapter-firebase\" \u003eFirebase\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/firebase\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/dm/@hyper-fetch/firebase?logoColor=fff\u0026logo=trending-up\" /\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/firebase\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/v/@hyper-fetch/firebase.svg?logo=npm\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/firebase\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/bundlephobia/minzip/@hyper-fetch/firebase?color=E10098\u0026logo=package\" /\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://github.com/BetterTyped/hyper-fetch/tree/main/packages/adapter-firebase-admin\" \u003eFirebase Admin\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/firebase-admin\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/dm/@hyper-fetch/firebase-admin?logoColor=fff\u0026logo=trending-up\" /\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/firebase-admin\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/v/@hyper-fetch/firebase-admin.svg?logo=npm\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/firebase-admin\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/bundlephobia/minzip/@hyper-fetch/firebase-admin?color=E10098\u0026logo=package\" /\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://github.com/BetterTyped/hyper-fetch/tree/main/packages/adapter-graphql\" \u003eGraphQL\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/graphql\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/dm/@hyper-fetch/graphql?logoColor=fff\u0026logo=trending-up\" /\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/graphql\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/v/@hyper-fetch/graphql.svg?logo=npm\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/graphql\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/bundlephobia/minzip/@hyper-fetch/graphql?color=E10098\u0026logo=package\" /\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://github.com/BetterTyped/hyper-fetch/tree/main/packages/adapter-axios\" \u003eAxios\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/axios\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/dm/@hyper-fetch/axios?logoColor=fff\u0026logo=trending-up\" /\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/axios\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/v/@hyper-fetch/axios.svg?logo=npm\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/axios\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/bundlephobia/minzip/@hyper-fetch/axios?color=E10098\u0026logo=package\" /\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://github.com/BetterTyped/hyper-fetch/tree/main/packages/codegen-openapi\" \u003eCodegen Openapi\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/codegen-openapi\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/dm/@hyper-fetch/codegen-openapi?logoColor=fff\u0026logo=trending-up\" /\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/codegen-openapi\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/npm/v/@hyper-fetch/codegen-openapi.svg?logo=npm\"/\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@hyper-fetch/codegen-openapi\"\u003e\n          \u003cimg src=\"https://custom-icon-badges.demolab.com/bundlephobia/minzip/@hyper-fetch/codegen-openapi?color=E10098\u0026logo=package\" /\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Examples\n\n#### Simple Setup\n\n```tsx\nimport { Client } from \"@hyper-fetch/core\";\n\n// Setup our connection to the server\nexport const client = new Client({ url: \"http://localhost:3000\" });\n\n// Create reusable requests for later use\nexport const postData = client.createRequest\u003cResponseType, RequestType, LocalErrorType, QueryParamsType\u003e()({\n  method: \"POST\",\n  endpoint: \"/data/:accountId\",\n});\n\nexport const getData = client.createRequest\u003cResponseType, RequestType, LocalErrorType, QueryParamsType\u003e()({\n  method: \"GET\",\n  endpoint: \"/user\",\n});\n```\n\n#### Fetching\n\nExecuting previously prepared requests is very simple. We can do this using the send method.\n\n```ts\nconst { data, error, status } = await getData.send();\n```\n\n#### Mutation request\n\nWe can attach the data to the request with methods before sending it to the server. This is helpful for building our\nrequest and attaching data to it which can be helpful when we need to create it in a few steps from data obtained during\nsome process.\n\n```ts\n// Set the information to request (methods return request clone - NOT mutating the source)\nconst request = postData\n  .setParams({ accountId: 104 }) // Set Params\n  .setQueryParams({ paramOne: \"test\", paramTwo: \"test2\" })\n  .setData({ name: \"My new entity\", description: \"Some description\" }) // Add payload data\n  .send();\n```\n\nWe can also pass them directly to the send method, which will add them to the request at once.\n\n```ts\n// OR pass dynamic data directly to '.send' method\nconst { data, error, status } = await postData.send({\n  params: { accountId: 104 },\n  data: { name: \"My new entity\", description: \"Some description\" },\n  queryParams: { paramOne: \"test\", paramTwo: \"test2\" },\n});\n```\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/sponsors/prc5?tier=Silver\"\u003e\n\t\t\u003cpicture\u003e\n\t\t\t\u003cimg width=\"830\" src=\"https://raw.githubusercontent.com/prc5/sponsors/main/assets/Silver.png\" alt=\"Premium sponsor banner\" /\u003e\n\t\t\u003c/picture\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/sponsors/prc5?tier=Silver\"\u003e\n\t\t\u003cpicture\u003e\n\t\t\t\u003cimg width=\"830\" src=\"https://raw.githubusercontent.com/prc5/sponsors/main/packages/silver/sponsorkit/sponsors.svg\" alt=\"Premium sponsor banner\" /\u003e\n\t\t\u003c/picture\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n### React\n\n#### Fetch with lifecycle\n\n\u003cdetails\u003e\n    \u003csummary\u003eShow me example\u003c/summary\u003e\n\n```tsx\nimport { useFetch } from \"@hyper-fetch/react\";\n\n// Lifecycle fetching\nconst { data, error, loading, onSuccess, onError } = useFetch(getData);\n\nonSuccess((data) =\u003e {\n  console.log(data);\n});\n\nonError((error) =\u003e {\n  console.log(error);\n});\n```\n\n\u003c/details\u003e\n\n#### Manually trigger requests\n\n\u003cdetails\u003e\n    \u003csummary\u003eShow me example\u003c/summary\u003e\n\n```tsx\nimport { useSubmit } from \"@hyper-fetch/react\";\n\nconst { submit, data, error, submitting, onSubmitSuccess, onSubmitError } = useSubmit(request);\n\nonSuccess((data) =\u003e {\n  console.log(data);\n});\n\nonError((error) =\u003e {\n  console.log(error);\n});\n\nreturn \u003cbutton onClick={() =\u003e submit()}\u003eTrigger request!\u003c/button\u003e;\n```\n\n\u003c/details\u003e\n\n#### Pass dynamic data to submit method\n\n\u003cdetails\u003e\n    \u003csummary\u003eShow me example\u003c/summary\u003e\n\n```tsx\nimport { useSubmit } from \"@hyper-fetch/react\";\n\nconst { submit, data, error, submitting, onSubmitSuccess, onSubmitError } = useSubmit(request);\n\nonSuccess((data) =\u003e {\n  console.log(data);\n});\n\nonError((error) =\u003e {\n  console.log(error);\n});\n\nreturn (\n  \u003cbutton\n    onClick={() =\u003e\n      submit({\n        params: { accountId: 104 },\n        data: { name: \"My new entity\", description: \"Some description\" },\n        queryParams: { paramOne: \"test\", paramTwo: \"test2\" },\n      })\n    }\n  \u003e\n    Trigger request!\n  \u003c/button\u003e\n);\n```\n\n\u003c/details\u003e\n\n#### Use submit promise response\n\n\u003cdetails\u003e\n    \u003csummary\u003eShow me example\u003c/summary\u003e\n\n```tsx\nimport { useSubmit } from \"@hyper-fetch/react\";\n\n// Manual triggering\nconst { submit, data, error, submitting, onSubmitSuccess, onSubmitError } = useSubmit(request);\n\nonSuccess((data) =\u003e {\n  console.log(data);\n});\n\nonError((error) =\u003e {\n  console.log(error);\n});\n\nconst handleSubmit = (values: ValuesType, { setSubmitting }: FormikHelpers) =\u003e {\n  const { data, error, status } = await submit(); // Submit method returns data!\n  setSubmitting(false);\n  if (data) {\n    notification.success(\"Done!\", data);\n  } else {\n    notification.success(\"Error!\", error);\n  }\n};\n\nreturn \u003cForm onSubmit={handleSubmit}\u003e...\u003c/Form\u003e;\n```\n\n\u003c/details\u003e\n\n# [Find out more examples](https://hyperfetch.bettertyped.com/docs/guides/basic/setup)\n\n## 💖 Our sponsors\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/sponsors/prc5\"\u003e\n\t\t\u003cimg src=\"https://raw.githubusercontent.com/prc5/sponsors/main/packages/other/sponsorkit/sponsors.svg?raw=true\" alt=\"My Sponsors\" /\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n","funding_links":["https://github.com/sponsors/prc5","https://github.com/sponsors/prc5?tier=platinum","https://github.com/sponsors/prc5?tier=Platinum","https://github.com/sponsors/prc5?tier=Gold","https://github.com/sponsors/prc5?tier=gold","https://github.com/sponsors/prc5?tier=Silver"],"categories":["TypeScript","**1. Libraries**"],"sub_categories":["APIs"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBetterTyped%2Fhyper-fetch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBetterTyped%2Fhyper-fetch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBetterTyped%2Fhyper-fetch/lists"}