https://github.com/banyudu/use-service
useSWR with custom fetcher
https://github.com/banyudu/use-service
Last synced: 5 months ago
JSON representation
useSWR with custom fetcher
- Host: GitHub
- URL: https://github.com/banyudu/use-service
- Owner: banyudu
- License: mit
- Created: 2023-10-01T03:08:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-26T16:26:13.000Z (6 months ago)
- Last Synced: 2024-11-26T17:29:21.296Z (6 months ago)
- Language: TypeScript
- Size: 144 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @banyudu/use-service
useSWR with custom fetcher
useService buid on top of useSWR, with custom fetcher and skip function
## Install
```bash
npm install @banyudu/use-service
```
## Usage
```typescript
// useXxxx.ts
import useService from '@banyudu/use-service'
const fetcher = async (params: XxxxReq): Promise => {
return axios.post('/api/xxxx', params)
}
const useXxxx = useService(fetcher, params => Boolean(params.id)) // fetcher will not be called if params.id is falsy
export default useXxxx
```
```typescript
// app.tsx
import useXxxx from '@hooks/useXxxx'
const App = () => {
const { data: xxxxRes, isValidating: xxxxLoading, wait: waitXxxx } = useXxxx({ id: 1 })
return (
{xxxxLoading ? 'loading' : xxxxRes?.data}
)
}
```
useXxxx will automatically send request when params change, if you want to manually trigger request, you can pass refreshFlag as second param, like:
```typescript
const App = () => {
const [refreshFlag, setRefreshFlag] = useState(Math.random())
const { data: xxxxRes, isValidating: xxxxLoading } = useXxxx({ id: 1 }, refreshFlag)
}
```