Trying to merge from v4 to v5 fixing a onSuccess callback

[gmcamposano]

I have tried a number of different things. Most of them involving different scenarios with useEffect, but it end up happening the following results:

  useEffect(() => {
    if (isSuccess) {
      setQuery(false)
    }
  }, [isSuccess])

The above example ends up always returning the query as true, event though the useEffect set it up as false. The search button is supposed to just set it true until its success and then back to false, while keeping the data.

const router = useRouter()
  const [fechaInicio, setFechaInicio] = useState('')
  const [fechaFin, setFechaFin] = useState('')
  const [tienda, setTienda] = useState('todas')
  const [query, setQuery] = useState(false)
  const { data: session } = useSession()
  const [buscar, setBuscar] = useState('')

  const { data, isError, isFetching, isLoading } = useQuery({
    queryKey: ['productos-vendidos', query],
    queryFn: () =>
      axiosFetcher(
        `/api/cantidad-productos-vendidos?fechaInicio=${fechaInicio}&fechaFin=${fechaFin}&tienda=${tienda}`
      ),
    enabled: !!query,
    placeholderData: keepPreviousData,
    onSuccess: () => setQuery(false)
  })

  useEffect(() => {
    if (router.query.fechaInicio &&  router.query.fechaFin) {
      setFechaInicio(router.query.fechaInicio)
      setFechaFin(router.query.fechaFin)
      setTienda(router.query.tienda)
      setQuery(true)
    }
  }, [router.query])

  if (isError) return <div>Error</div>
  if (isFetching) return <Loading />

return (
...
<form
  className="space-x-3"
  onSubmit={(e) => {
    e.preventDefault()
    router.push({
      query: {
        fechaInicio,
        fechaFin,
        tienda
      }
    })
    setQuery(true)
  }}
>
... more code below