https://github.com/aa900031/tanstack-query-callbacks
Use callbacks of tanstack/query in the usual way, as before.
https://github.com/aa900031/tanstack-query-callbacks
react react-query tanstack-query tanstack-react-query tanstack-vue-query vue vue-query
Last synced: 3 months ago
JSON representation
Use callbacks of tanstack/query in the usual way, as before.
- Host: GitHub
- URL: https://github.com/aa900031/tanstack-query-callbacks
- Owner: aa900031
- License: mit
- Created: 2023-12-27T04:08:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-13T16:22:11.000Z (about 1 year ago)
- Last Synced: 2024-04-13T21:56:37.078Z (about 1 year ago)
- Topics: react, react-query, tanstack-query, tanstack-react-query, tanstack-vue-query, vue, vue-query
- Language: TypeScript
- Homepage:
- Size: 80.1 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# tanstack-query-callbacks
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![coverage][coverage-src]][coverage-href]
Use callbacks of query in the usual way, as before.
The tanstack/query has removed `onSuccess`, `onError` and `onSettled` from useQuery in v5. You can find more information in the [RFC](https://github.com/TanStack/query/discussions/5279).
# Features
- Support Tanstack/Query v4, v5
- Support Vue, React
## Instanll
```shell
// use npm
npm install tanstack-query-callbacks
// use pnpm
pnpm add tanstack-query-callbacks
```
## Usage (Vue)
```vue
import { useQuery } from '@tanstack/vue-query'
import { useQueryCallbacks } from 'tanstack-query-callbacks/vue'
const queryKey = ['foo']
const query = useQuery(queryKey, () => Promise.resolve('bar'))
useQueryCallbacks({
queryKey,
onSuccess: (data) => {
console.log('success', data)
},
onError: (err) => {
console.error('error', err)
},
onSettled: (data, err) => {
console.log('settled', { data, err })
}
})
```
## Usage (React)
```ts
import { useQuery } from '@tanstack/react-query'
import { useQueryCallbacks } from 'tanstack-query-callbacks/react'
const queryKey = ['foo']
const query = useQuery(queryKey, () => Promise.resolve('bar'))
useQueryCallbacks({
queryKey,
onSuccess: (data) => {
console.log('success', data)
},
onError: (err) => {
console.error('error', err)
},
onSettled: (data, err) => {
console.log('settled', { data, err })
}
})
```
[npm-version-src]: https://img.shields.io/npm/v/tanstack-query-callbacks?style=flat&colorA=18181B&colorB=F0DB4F
[npm-version-href]: https://npmjs.com/package/tanstack-query-callbacks
[npm-downloads-src]: https://img.shields.io/npm/dm/tanstack-query-callbacks?style=flat&colorA=18181B&colorB=F0DB4F
[npm-downloads-href]: https://npmjs.com/package/tanstack-query-callbacks
[bundle-src]: https://img.shields.io/bundlephobia/minzip/tanstack-query-callbacks?style=flat&colorA=18181B&colorB=F0DB4F
[bundle-href]: https://bundlephobia.com/result?p=tanstack-query-callbacks
[coverage-src]: https://img.shields.io/codecov/c/gh/aa900031/tanstack-query-callbacks?token=AG56Z6EP8U&logo=codecov&color=F0DB4F
[coverage-href]: https://codecov.io/gh/aa900031/tanstack-query-callbacks