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.
- Support Tanstack/Query v4, v5
- Support Vue, React
// use npm npm install tanstack-query-callbacks // use pnpm pnpm add tanstack-query-callbacks<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>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 }) } })