https://github.com/jmpolitzer/use-api-request
A React Hook for Making Api Requests Using Axios
https://github.com/jmpolitzer/use-api-request
api axios hooks http react react-hooks request
Last synced: about 1 year ago
JSON representation
A React Hook for Making Api Requests Using Axios
- Host: GitHub
- URL: https://github.com/jmpolitzer/use-api-request
- Owner: jmpolitzer
- Created: 2019-04-02T10:52:43.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T18:06:08.000Z (over 3 years ago)
- Last Synced: 2024-04-24T12:26:07.886Z (almost 2 years ago)
- Topics: api, axios, hooks, http, react, react-hooks, request
- Language: JavaScript
- Size: 5.2 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-api-request
> A simple React hook for making network requests using Axios.
[](https://www.npmjs.com/package/use-api-request)
[](https://github.com/prettier/prettier)
[](https://travis-ci.com/jmpolitzer/use-api-request)
[](https://coveralls.io/github/jmpolitzer/use-api-request?branch=master)
## Install
```
npm install --save use-api-request
```
## Example
```javascript
import axios from 'axios';
import { useApiRequest } from 'use-api-request';
function MyComponent() {
const apiConfig = {
axios: axios.create({
baseURL: "https://whereami.com/"
}),
key: "example",
debug: true
};
const { state, makeApiRequest } = useApiRequest(apiConfig);
const { fetching, resources: { posts }, errors } = state;
const requestConfig = {
posts: {
url: "/posts"
}
};
return (
<>
makeApiRequest(requestConfig)}>Get Posts
<>
{fetching.includes("posts") &&
fetching}
{posts.data.length > 0 && posts.data.map(post =>
{post.title}) }
{errors.posts && {errors.posts.message}}
>
>
);
}
```
## Usage
1. 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.
2. 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.
3. Call `makeApiRequest` and look for your response on the resources key of the `state` object provided by `useApiRequest`.
## Features
Make a single request:
```javascript
const singleRequestConfig = {
posts: {
url: "/posts"
}
};
makeApiRequest(singleRequestConfig);
```
Make multiple concurrent requests:
```javascript
const concurrentRequestsConfig = {
albums: {
url: "/albums"
},
users: {
url: "/users"
}
};
makeApiRequests(concurrentRequestsConfig);
```
Make a sequential request (dependent variables are wrapped in double curly brackets and will always be properties of `data`):
```javascript
const sequentialRequestConfig = {
userPosts: {
url: "/posts/1",
next: {
url: "/posts?userId={{data.userId}}"
}
}
};
makeApiRequest(sequentialRequestConfig);
```
## API
```javascript
const { state, makeApiRequest, makeApiRequests } = useApiRequest(apiConfig);
const { fetching, resources, errors } = state;
```
`fetching` - array of strings corresponding to the resource key(s) used in the request config
`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
`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
## License
MIT © [jmpolitzer](https://github.com/jmpolitzer)