A fully typed lightweight wrapper with more powerful and flexible features of fetch api
- Fully tested with Vitest
- Create documentation with Vitepress
- Create offical release
- Create automatic deploy new release on push tag
👍🎉 First off, thanks for taking the time to contribute! 🎉👍
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
✅ The features of Fetch api wrapper can be used without concern. They are tested and already used in some projects
npm i @malolebrin/fetch-api-wrapper
// or
yarn add @malolebrin/fetch-api-wrapper
// or
pnpm i @malolebrin/fetch-api-wrapper
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.
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
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. 🚀
const { data, success, status, statusText } = await api.get<TSInterface>('<my path>')const { data, success, status, statusText } = await api.post<TSInterface>('<my path>', body)const { data, success, status, statusText } = await api.put<TSInterface>('<my path>/:id', body)const { data, success, status, statusText } = await api.patch<TSInterface>('<my path>/:id', body)const { data, success, status, statusText } = await api.delete<TSInterface>('<my path>/:id')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. 🚀
const { data, success, status, statusText } = await getApi<TSInterface>('<my path>')const { data, success, status, statusText } = await postApi<TSInterface>('<my path>', body)const { data, success, status, statusText } = await putApi<TSInterface>('<my path>/:id', body)const { data, success, status, statusText } = await patchApi<TSInterface>('<my path>/:id', body)const { data, success, status, statusText } = await deleteApi<TSInterface>('<my path>/:id')MIT License © 2022 Malo Lebrin