How to use a callback

[diegoarcega]

I want to do something like this
https://github.com/slorber/react-async-hook#usecase-injecting-async-feedback-into-buttons

I need a callback returned from the use query hook. When I click on a list of products, I need to request data and then redirect the user to a new page.

In the docs this is not explained or not explained very well.

[wolverineks]

https://react-query.tanstack.com/docs/api#usequery

use isLoading or status === 'loading' for first load
use isFetching for manual refetching

[cherniavskii]

But you can prefetch after user clicks, right?

[diegoarcega]

I can, but it only makes sense when I have a useQuery that will 'consume' the prefetched data, and currently I dont have.

[wolverineks]

could you do something like

const product = useQuery({ 
  ..., 
  config: { 
    onSuccess: ({ id }: Product) => redirect('/products/' + id), 
    enabled: false 
})

<button disabled={product.isLoading} onClick={() => product.refetch()}>Go To Product</button>

[diegoarcega]

hm I will try that, thank you

[catchshyam]

@diegoarcega did you manage to find a solution?