tanstack-query-callbacks

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.

Features

• Support Tanstack/Query v4, v5
• Support Vue, React

Instanll

1// use npm
2npm install tanstack-query-callbacks
3
4// use pnpm
5pnpm add tanstack-query-callbacks

Usage (Vue)

1<script setup lang="ts">
2import { useQuery } from '@tanstack/vue-query'
3import { useQueryCallbacks } from 'tanstack-query-callbacks/vue'
4const queryKey = ['foo']
5const query = useQuery(queryKey, () => Promise.resolve('bar'))
6useQueryCallbacks({
7	queryKey,
8	onSuccess: (data) => {
9		console.log('success', data)
10	},
11	onError: (err) => {
12		console.error('error', err)
13	},
14	onSettled: (data, err) => {
15		console.log('settled', { data, err })
16	}
17})
18</script>

Usage (React)

1import { useQuery } from '@tanstack/react-query'
2import { useQueryCallbacks } from 'tanstack-query-callbacks/react'
3
4const queryKey = ['foo']
5const query = useQuery(queryKey, () => Promise.resolve('bar'))
6
7useQueryCallbacks({
8	queryKey,
9	onSuccess: (data) => {
10		console.log('success', data)
11	},
12	onError: (err) => {
13		console.error('error', err)
14	},
15	onSettled: (data, err) => {
16		console.log('settled', { data, err })
17	}
18})