{"id":26804575,"url":"https://github.com/jmpolitzer/use-api-request","last_synced_at":"2025-03-29T22:18:24.536Z","repository":{"id":34636302,"uuid":"179057705","full_name":"jmpolitzer/use-api-request","owner":"jmpolitzer","description":"A React Hook for Making Api Requests Using Axios","archived":false,"fork":false,"pushed_at":"2022-12-09T18:06:08.000Z","size":5454,"stargazers_count":2,"open_issues_count":21,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-04-24T12:26:07.886Z","etag":null,"topics":["api","axios","hooks","http","react","react-hooks","request"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/jmpolitzer.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}},"created_at":"2019-04-02T10:52:43.000Z","updated_at":"2020-03-17T22:21:42.000Z","dependencies_parsed_at":"2023-01-15T08:15:14.725Z","dependency_job_id":null,"html_url":"https://github.com/jmpolitzer/use-api-request","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmpolitzer%2Fuse-api-request","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmpolitzer%2Fuse-api-request/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmpolitzer%2Fuse-api-request/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmpolitzer%2Fuse-api-request/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmpolitzer","download_url":"https://codeload.github.com/jmpolitzer/use-api-request/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246249212,"owners_count":20747168,"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":["api","axios","hooks","http","react","react-hooks","request"],"created_at":"2025-03-29T22:18:24.042Z","updated_at":"2025-03-29T22:18:24.520Z","avatar_url":"https://github.com/jmpolitzer.png","language":"JavaScript","readme":"# use-api-request\n\n\u003e A simple React hook for making network requests using Axios.\n\n[![NPM](https://img.shields.io/npm/v/use-api-request.svg)](https://www.npmjs.com/package/use-api-request)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![Build Status](https://travis-ci.com/jmpolitzer/use-api-request.svg?branch=master)](https://travis-ci.com/jmpolitzer/use-api-request)\n[![Coverage Status](https://coveralls.io/repos/github/jmpolitzer/use-api-request/badge.svg?branch=master)](https://coveralls.io/github/jmpolitzer/use-api-request?branch=master)\n\n## Install \n\n```\nnpm install --save use-api-request\n```\n\n## Example\n\n```javascript\nimport axios from 'axios';\nimport { useApiRequest } from 'use-api-request';\n\nfunction MyComponent() {\n  const apiConfig = {\n    axios: axios.create({\n        baseURL: \"https://whereami.com/\"\n    }),\n    key: \"example\",\n    debug: true\n  };\n\n  const { state, makeApiRequest } = useApiRequest(apiConfig);\n  const { fetching, resources: { posts }, errors } = state;\n\n  const requestConfig = {\n     posts: {\n        url: \"/posts\"\n      }\n  };\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={() =\u003e makeApiRequest(requestConfig)}\u003eGet Posts\u003c/button\u003e\n      \u003c\u003e\n        {fetching.includes(\"posts\") \u0026\u0026 \u003cdiv\u003efetching\u003c/div\u003e}\n        {posts.data.length \u003e 0 \u0026\u0026 posts.data.map(post =\u003e\n            \u003cdiv key={post.id}\u003e{post.title}\u003c/div\u003e) }\n        {errors.posts \u0026\u0026 \u003cdiv\u003e{errors.posts.message}\u003c/div\u003e}\n      \u003c/\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Usage\n\n1. Pass a config object with an Axios instance and a unique `key` string into `useApiRequest`. The Axios instance takes the exact same configurations as specified in the [documentation](https://www.npmjs.com/package/axios). Optionally include a `debug` flag if you'd like to see redux-like logging in your console.\n\n2. Create a request object -- again, refer to the [Axios documentation](https://www.npmjs.com/package/axios) for examples -- and pass it into `makeApiRequest`. Note that this library uses `Axios.request()` under the hood. The request object is nothing more than an Axios request config object assigned to a resource key of your choosing. So, if you name the key `things`, you will find `things` many times within the state object. See below for more details.\n\n3. Call `makeApiRequest` and look for your response on the resources key of the `state` object provided by `useApiRequest`.\n\n## Features\n\nMake a single request:\n    \n ```javascript\n const singleRequestConfig = {\n    posts: {\n      url: \"/posts\"\n    }\n  };\n\n makeApiRequest(singleRequestConfig);\n ```\n   \nMake multiple concurrent requests:\n  \n  ```javascript\n  const concurrentRequestsConfig = {\n      albums: {\n        url: \"/albums\"\n      },\n      users: {\n        url: \"/users\"\n      }\n    };\n\n  makeApiRequests(concurrentRequestsConfig);\n  ```\n\nMake a sequential request (dependent variables are wrapped in double curly brackets and will always be properties of `data`): \n\n  ```javascript\n  const sequentialRequestConfig = {\n      userPosts: {\n        url: \"/posts/1\",\n        next: {\n          url: \"/posts?userId={{data.userId}}\"\n        }\n      }\n    };\n\n  makeApiRequest(sequentialRequestConfig);\n  ```\n  \n## API\n\n```javascript\nconst { state, makeApiRequest, makeApiRequests } = useApiRequest(apiConfig);\nconst { fetching, resources, errors } = state;\n```\n\n`fetching` - array of strings corresponding to the resource key(s) used in the request config\n\n`resources` - object of successful responses; each response can be found under the key used in the request config, and each response contains the entire response generated by Axios\n\n`errors` - object of errors; each error can be found under the key used in the request config, and each error contains the entire error generated by Axios\n \n## License\n\nMIT © [jmpolitzer](https://github.com/jmpolitzer)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmpolitzer%2Fuse-api-request","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmpolitzer%2Fuse-api-request","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmpolitzer%2Fuse-api-request/lists"}