tanstack-query-callbacks
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

tanstack-query-callbacks

npm version npm downloads bundle coverage

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

Package Sidebar

Install

npm i tanstack-query-callbacks

Weekly Downloads

33

Version

0.2.1

License

MIT

Unpacked Size

20 kB

Total Files

20

Last publish

Collaborators

  • aa900031