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

// use npm
npm install tanstack-query-callbacks

// use pnpm
pnpm add tanstack-query-callbacks

Usage (Vue)

<script setup lang="ts">
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 })
	}
})
</script>

Usage (React)

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 })
	}
})