@malolebrin/fetch-api-wrapper
v0.2.4
Published
use fetch to simplify the code for making HTTP requests taking full advantage of TypeScript's type system
Downloads
25
Readme
Fetch api wrapper
A fully typed lightweight wrapper with more powerful and flexible features of fetch api
Roadmap:
- [x] Fully tested with Vitest
- [ ] Create documentation with Vitepress
- [ ] Create offical release
- [ ] Create automatic deploy new release on push tag
Contributions:
👍🎉 First off, thanks for taking the time to contribute! 🎉👍
How Can I Contribute?
Pull Requests
The process described here has several goals:
- Maintain Fetch-api-wrapper's quality
- Fix problems that are important to users
- Enable a sustainable system for Fetch-api-wrapper's maintainers to review contributions
You can create PR as your wish to fix bug, and create features
How to use It ?
✅ The features of Fetch api wrapper can be used without concern. They are tested and already used in some projects
Install package
npm i @malolebrin/fetch-api-wrapper
// or
yarn add @malolebrin/fetch-api-wrapper
// or
pnpm i @malolebrin/fetch-api-wrapper
Concepts and usage
Fetch api wrapper can be used in any javascript or typescript project (vanilla, react, vue, etc...)
This package was built to use the fetch api in a very simple way with a minimal configuration.
Class or Hook
The package was built with two possible possibilities for the user. You can use FetchApiWrapper class
import { FetchWrapper } from '@malolebrin/fetch-api-wrapper'
const api = new FetchWrapper({
baseUrl: '<your url>',
token: '<your token>',
headers: '<your headers>',
})
Or useFetchWrapper hook.
import { useFetchWrapper } from '@malolebrin/fetch-api-wrapper'
const {
deleteApi,
postApi,
patchApi,
putApi,
getApi,
isSuccess,
submissionErrors,
setIsSubmitting,
} = useFetchWrapper({
baseUrl: '<your url>',
token: '<your token>',
headers: '<your headers>',
})
It depends on your preference. Look at the documentation to understand how to use these two utilities
Create the api instance with Class
import { FetchWrapper } from '@malolebrin/fetch-api-wrapper'
const api = new FetchWrapper({
baseUrl: '<your url>',
token: '<your token>',
headers: '<your headers>',
})
You can now use the api constant with headers and tokens directly associated with it. 🚀
Fetch data
const { data, success, status, statusText } = await api.get<TSInterface>('<my path>')
Post data
const { data, success, status, statusText } = await api.post<TSInterface>('<my path>', body)
Put data
const { data, success, status, statusText } = await api.put<TSInterface>('<my path>/:id', body)
Patch data
const { data, success, status, statusText } = await api.patch<TSInterface>('<my path>/:id', body)
Delete data
const { data, success, status, statusText } = await api.delete<TSInterface>('<my path>/:id')
Create the api instance with Hook
import { useFetchWrapper } from '@malolebrin/fetch-api-wrapper'
const {
deleteApi,
postApi,
patchApi,
putApi,
getApi,
isSuccess,
submissionErrors,
setIsSubmitting,
} = useFetchWrapper({
baseUrl: '<your url>',
token: '<your token>',
headers: '<your headers>',
})
You can now use the api constant with headers and tokens directly associated with it. 🚀
Fetch data
const { data, success, status, statusText } = await getApi<TSInterface>('<my path>')
Post data
const { data, success, status, statusText } = await postApi<TSInterface>('<my path>', body)
Put data
const { data, success, status, statusText } = await putApi<TSInterface>('<my path>/:id', body)
Patch data
const { data, success, status, statusText } = await patchApi<TSInterface>('<my path>/:id', body)
Delete data
const { data, success, status, statusText } = await deleteApi<TSInterface>('<my path>/:id')
License
MIT License © 2022 Malo Lebrin