https://github.com/sametcodes/react-use-api
A custom hook for HTTP methods with inner state management.
https://github.com/sametcodes/react-use-api
Last synced: 11 months ago
JSON representation
A custom hook for HTTP methods with inner state management.
- Host: GitHub
- URL: https://github.com/sametcodes/react-use-api
- Owner: sametcodes
- Created: 2022-09-24T12:37:05.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-05T16:01:58.000Z (over 3 years ago)
- Last Synced: 2025-06-18T04:56:37.728Z (12 months ago)
- Language: TypeScript
- Homepage:
- Size: 173 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-use-api
> Do not use. This is an experimental package for now.
## Development
The package has been developed on a React project, it's not a standalone package for now. I've been working on finding for the best way to handle renders and hold inner states. If you want to contribute, you need to serve the `users.json` file through [json-server](https://github.com/typicode/json-server), install the dependencies and run the react project.
## Usage
This package provides request management with an inner state on React components. It's built with query-mutation request pattern.
### `APIContext`
`APIContext` must be used to as a parent node to provide endpoints, options and configurations of requests. Once it's used, the `useAPI` hook function can be used in components.
```javascript
const options = {
base_url: 'http://localhost:3000'
}
root.render(
);
```
### `useAPI` and HTTP method hook functions
`useAPI` exposes HTTP method functions for the given endpoint as parameter. Method options, body or query parameters can be passed as arguments into the functions.
The method-hook function returns values: *store* and the method function itself. The reason of returning the method function in the results is resending the request. The variables object will be saved into the `store.variables`.
#### Example with the query method
```javascript
const App = () => {
const [{data, variables}, get] = useAPI("/users").get({ page: 1 });
const nextPage = () => {
get({ page: variables.page + 1 })
}
return
{data.map(user) =>
{user.name}
}
Next page
}
```
If any error will be thrown during the request, the error will be saved into the `error` object and it can be reached as `store.error` during rendering process.
The `data` and `response` values might be confusing. The `data` value holds the same value with `response` value, but it can be changed by defining an `updateStore` callback function as the second parameter of the returned method function from the hook value. The main idea is the `data` value is that it provides storing responses of more then one request, such as "loding more" functionality.
```javascript
const App = () => {
const [{data, variables}, get] = useAPI("/users").get({ page: 1 });
const loadMore = () => {
get({ page: variables.page + 1 }, (response, store) => {
return [...store, ...response]
})
}
return
{data.map(user) =>
{user.name}
}
Load more
}
```
#### Example with the mutation methods
Mutation methods can be used to send `POST`, `PUT`, `PATCH` and `DELETE` requests. The functions can be taken a custom path, if they don't, they will use the main path that is passed in the `useAPI()` hook.
Unlike the `.get` method, the mutation methods don't be triggered initially when the component has mounted. They must be triggered by using the returned method function in the hook results. The `updateStore` callback function works in the same way as we've seen above.
```javascript
const App = () => {
const [{ loading, error, data }, post] = useAPI("/users").post();
const onSubmit = (values) => {
post({ body: values }, (response, store) => {
return [response, ...store];
})
}
return
}
```
#### Example with using query and mutation methods together
We can assign the `useAPI()` returning value into a variable to use multiple HTTP methods and it will provide us a basic state management. Let's use `.get`, `.post` and `.delete` methods together without having a local state in the component.
Custom path can be re-defined and it's allowed to interpolate parameters into a pre-defined custom path right before sending the request. Check `API.delete` hook call and the `params` argument passed into the `remove` function.
```javascript
const App = () => {
const API = useAPI("/users");
const [{ loading, error, data }, get] = API.get();
const [postLoading, post] = API.post(); // no custom path used, so the path is /users
const [, remove] = API.delete("/users/:id"); // custom path can be re-defined
const onSubmit = (values) => {
post({ body: values }, (response, store) => {
return [response, ...store];
})
}
const onDelete = (id) => {
remove({ params: { id } }, (response, store) => {
return store.filter((item: any) => item.id !== id)
})
}
const loadMore = () => {
get({ page: variables.page + 1 }, (response, store) => {
return [...store, ...response]
})
}
return
{data.map(user) =>
{user.name}
onDelete(user.id)}>
}
Load more
}
```