{"id":19594567,"url":"https://github.com/toggle-corp/toggle-request","last_synced_at":"2026-05-08T03:02:44.798Z","repository":{"id":45498183,"uuid":"360045316","full_name":"toggle-corp/toggle-request","owner":"toggle-corp","description":"A simple request library using react hooks","archived":false,"fork":false,"pushed_at":"2023-08-13T17:00:58.000Z","size":204,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-23T02:29:31.150Z","etag":null,"topics":["fetch","react","react-hooks"],"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/toggle-corp.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}},"created_at":"2021-04-21T05:41:29.000Z","updated_at":"2021-12-31T07:54:28.000Z","dependencies_parsed_at":"2024-11-11T08:54:13.321Z","dependency_job_id":null,"html_url":"https://github.com/toggle-corp/toggle-request","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toggle-corp%2Ftoggle-request","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toggle-corp%2Ftoggle-request/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toggle-corp%2Ftoggle-request/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toggle-corp%2Ftoggle-request/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toggle-corp","download_url":"https://codeload.github.com/toggle-corp/toggle-request/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240867759,"owners_count":19870469,"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":["fetch","react","react-hooks"],"created_at":"2024-11-11T08:43:58.297Z","updated_at":"2026-05-08T03:02:44.706Z","avatar_url":"https://github.com/toggle-corp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Toggle Request\n\nA simple request library using react hooks\n\n## Features\n\n- Typesafe\n- Lightweight\n\n### Installation\n\n```bash\nnpm install @togglecorp/toggle-request\n// or\nyarn install @togglecorp/toggle-request\n```\n\n## API\n\nThe request library exposes two react hooks to execute a request.\n\n1. useRequest\n2. useLazyRequest\n\n### useRequest\n\n`useRequest` will immediately execute the request when your component renders\nand returns the result that can be used to render the UI.\n\n```typescript\n// Example usage\n\nconst {\n    response,\n    pending,\n    error,\n} = useRequest({\n    url: `/projects/${id}/`,\n    query: {\n        limit: 12,\n        offset: 1,\n    },\n    method: 'GET',\n    skip: !id,\n    onSuccess: (response) =\u003e {\n        // NOTE: response from the server\n        console.info(`Fetched ${response.total} items from server`);\n    }\n    onFailure: () =\u003e {\n        console.error('Could not fetch items');\n    }\n})\n```\n\nThe request options for useRequest are listed below:\n\n|options|description|\n|----|----|\n|url|The request url (excluding url query)|\n|pathVariables|Values for the variables in the `url`\n|query|The query part of the url as object|\n|body|The request body|\n|method|The request method|\n|other|The request object accepted by fetch excluding body and method|\n|onSuccess|Callback called when a request has completed successfully|\n|onFailure|Callback called when a request has failed|\n|skip|Can be used to skip calling the request|\n|delay|Can be used to delay calling a request (in milliseconds)|\n|shouldRetry|Can be used to retry a request. This method should return time after which request should be retried.|\n|shouldPoll|Can be used to poll a request. This method should return time to poll the request.|\n|preserveResponse|Can be used to persist previous response until new response has arrived|\n\nThe result for useRequest are listed below:\n\n|property|description|\n|----|----|\n|response|The response from server after the request completes|\n|pending|The request status|\n|error|The error from server after the request errors|\n|retrigger|Used to re-execute the request|\n\n### useLazyRequest\n\n`useLazyRequest` will only execute the request once user calls the trigger\nfunction. When triggering the request, user can define a `context` value which\ncan be used to define request options: url, query, body, method and other.\nIf there is no `context` value, user should trigger the request passing `null`\nvalue.\n\n```typescript\n// Example usage\n\nconst {\n    response,\n    pending,\n    error,\n    trigger,\n} = useRequest({\n    method: 'PUT',\n    url: (ctx) =\u003e `/projects/${ctx.id}/`,\n    body: (ctx) =\u003e ctx.body,\n    onSuccess: (response) =\u003e {\n        // NOTE: response from the server\n        console.info(`Updated item ${response.name}`);\n    }\n    onFailure: () =\u003e {\n        console.error('Could not update item');\n    }\n})\n\nconst handleSave = useCallback(\n    (id, body) =\u003e {\n        trigger({\n            id,\n            body,\n        });\n    },\n    [trigger],\n);\n```\n\n\nThe request options for useLazyRequest are listed below:\n\n|options|description|\n|----|----|\n|url|The request url (can be a function)|\n|pathVariables|Values for the variables in the `url`\n|query|The query part of the url as object (can be a function)|\n|body|The request body (can be a function)|\n|method|The request method (can be a function)|\n|other|The request object accepted by fetch excluding body and method (can be a function)|\n|onSuccess|Callback called when a request has completed successfully|\n|onFailure|Callback called when a request has failed|\n|delay|Can be used to delay calling a request (in milliseconds)|\n|shouldRetry|Can be used to retry a request. This method should return time after which request should be retried.|\n|shouldPoll|Can be used to poll a request. This method should return time to poll the request.|\n|preserveResponse|Can be used to persist previous response until new response has arrived|\n\nThe result for useLazyRequest are listed below:\n\n|property|description|\n|----|----|\n|response|The response from server after the request completes|\n|pending|The request status|\n|error|The error from server after the request errors|\n|context|The context of the last request|\n|trigger|Used to re-execute the request. The function accepts one argument to define the request context|\n\n### RequestContext\n\nThe RequestContext uses React Context API to define configurations available\nthroughout all the child components.\nThe context defines transformer functions to transform request url, request\noption, response and error.\n\n```typescript\nconst requestContextValue = {\n    transformUrl: transformProjectUrls,\n    transformOptions: transformProjectOptions,\n    transformResponse: transformProjectResponse,\n    transformError: transformProjectError,\n};\n\nreturn (\n    \u003cRequestContext.Provider value={requestContextValue}\u003e\n        \u003cProjectApp /\u003e\n    \u003c/RequestContext.Provider\u003e\n)\n```\n\n|properties|description|\n|----|----|\n|transformUrl|Function to transform every url before request is executed|\n|transformOptions|Function to transform every request options before request is executed|\n|transformResponse|Function to transform every response after a successful response is received|\n|transformError|Function to transform every response after a failure response is received|\n\n### Partially defining types\n\n```typescript\nimport { Error, OptionBase } from './my-project-typings';\n\n// eslint-disable-next-line\nconst useMyLazyRequest: \u003cR, C = null\u003e(requestOptions: LazyRequestOptions\u003cR, Error, C, OptionBase\u003e) =\u003e {\n    response: R | undefined;\n    pending: boolean;\n    error: Error | undefined;\n    trigger: (ctx: C) =\u003e void;\n    context: C | undefined,\n} = useMyLazyRequest;\n\nconst useMyRequest: \u003cR\u003e(requestOptions: RequestOptions\u003cR, Error, OptionBase\u003e) =\u003e {\n    response: R | undefined;\n    pending: boolean;\n    error: Error | undefined;\n    retrigger: () =\u003e void;\n} = useMyRequest;\n```\n\nIn the example above:\n- OptionBase defines extra property passed to request hooks, that are available\n  on transformer functions.\n- Error defines the error type received from the server\n\n\n### Detailed API\n\nUnfortunately, there is no detailed api documentation yet. Please refer to the\nsource code.\n\n## Development\n\n### Running locally\n\n```bash\n# Install dependencies\nyarn install\n\n# Build\nyarn build\n```\n\n### Linting\n\n```bash\n# Eslint\nyarn lint\n\n# Typescript\nyarn typecheck\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoggle-corp%2Ftoggle-request","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoggle-corp%2Ftoggle-request","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoggle-corp%2Ftoggle-request/lists"}