Migration from v4 to v5. Replace onSuccess for refetch case

[ok2ju]

Hey, guys. I'm in the process of migration to v5 (from v4) and I'm wondering how to properly replace onSuccess callback for query that only used for refetch case (enabled: false and triggered by calling refetch). Could you provide me a guidance on how to properly achieve that? Because we can't use isSuccess, isError or status as status is always in success state when refetching. So, I can't do something like that:

const { isSuccess } = useQuery(...);

useEffect(() => {
  if (isSuccess) {
    // console.log('success');
  }
}, [isSuccess]);

Thanks in advance

[TkDodo]

replace onSuccess callback for query that only used for refetch case (enabled: false and triggered by calling refetch)

I don't understand that use-case and the example. Can you try to be more specific please? What's a "refetch case" ?

[ok2ju]

@TkDodo sure, let me show you example:

const useExampleQuery = () => {
    const { refetch, error, isSuccess } = useQuery({ ..., enabled: false });

    // This will not work and it's clear why (`status` is always in success state here)
    // But how to achieve the previous behaviour (`onSuccess` was called every time the query resolved successfully no matter if it's refetch or not)
    useEffect(() => {
        if (isSuccess) {
            console.log('Trying to emulate legacy `onSuccess`');
        }
    }, [isSuccess]);

    useEffect(() => {
        if (error) {
            toast.error('Some error');
        }
    }, [error])

    return { refetch };
};

const ExampleComponent = () => {
    const { refetch } = useExampleQuery();

    const handleClick = () => {
        refetch();
    };

    return (
        <button onClick={handleClick}>Some button</button>
    );
};

[TkDodo]

const handleClick = () => {
  try {
    const { data } = await refetch();
    console.log('Trying to emulate legacy `onSuccess`');
  }
  catch (e) {
    toast.error('Some error');
  }
}

[ok2ju]

Thanks for your time @TkDodo 👍 I've got your idea.