T
TanStack•2y ago
exotic-emerald

Migrated from v4 to v5, don't know how to use it without onSucess

I have tried removing the onSuccess as I should, and then including it in the an independent useEffect, but the content renders for a split second and disappears. 
export default function Facturados() {
 const [desde, setDesde] = useState(router.query.desde || '')
 const [hasta, setHasta] = useState(router.query.hasta || '')
 const [query, setQuery] = useState(false)

//here is my main issue
  const getFacturas = useQuery({
    queryKey: ['facturas', query],
    queryFn: () =>
      axiosFetcherFacturasBetweenDates(
        '/api/analisis-facturas-api',
        desde,
        hasta,
        tienda
      ),
    enabled: !!query,
    keepPreviousData: true,
    refetchOnWindowFocus: false,
    onSuccess: () => {
      setQuery(false)
    }
  })

const handleSearch = async (e) => {
    e.preventDefault()
    setQuery(true)

    if (session.role.includes('ADMIN')) {
      router.push({
        query: { desde, hasta, tienda }
      })
    } else {
      router.push({
        query: { desde, hasta }
      })
    }
  }

useEffect(() => {
    if (router.query.desde && router.query.hasta && router.query.tienda) {
      setQuery(true)
    }
  }, [router.query.desde, router.query.hasta, router.query.tienda])

  if (getFacturas.isFetching) return <Loading />
export default function Facturados() {
 const [desde, setDesde] = useState(router.query.desde || '')
 const [hasta, setHasta] = useState(router.query.hasta || '')
 const [query, setQuery] = useState(false)

//here is my main issue
  const getFacturas = useQuery({
    queryKey: ['facturas', query],
    queryFn: () =>
      axiosFetcherFacturasBetweenDates(
        '/api/analisis-facturas-api',
        desde,
        hasta,
        tienda
      ),
    enabled: !!query,
    keepPreviousData: true,
    refetchOnWindowFocus: false,
    onSuccess: () => {
      setQuery(false)
    }
  })

const handleSearch = async (e) => {
    e.preventDefault()
    setQuery(true)

    if (session.role.includes('ADMIN')) {
      router.push({
        query: { desde, hasta, tienda }
      })
    } else {
      router.push({
        query: { desde, hasta }
      })
    }
  }

useEffect(() => {
    if (router.query.desde && router.query.hasta && router.query.tienda) {
      setQuery(true)
    }
  }, [router.query.desde, router.query.hasta, router.query.tienda])

  if (getFacturas.isFetching) return <Loading />
6 Replies
solid-orange
solid-orange•2y ago
your [query, setQuery] is derived state that you don't need to store
solid-orange
solid-orange•2y ago
exotic-emerald
exotic-emeraldOP•2y ago
I made the following changes: I removed the query, setQuery state. I removed the useEffect I then added this: const query = router.query.desde && router.query.hasta && router.query.tienda Its now working correctly. Would you suggest adding anything else?
provincial-silver
provincial-silver•2y ago
keepPreviousData also changed in v5, you have to use placeholderData :keepPreviousData
exotic-emerald
exotic-emeraldOP•2y ago
yeah, figured that one out const getFacturas = useQuery({ queryKey: ['facturas', query], queryFn: () => axiosFetcherFacturasBetweenDates( '/api/analisis-facturas-api', desde, hasta, tienda ), enabled: !!query, placeholderData: keepPreviousData, refetchOnWindowFocus: false }) thanks Sorry to bother again... I am indeed stuck with this one: i have tried many different ways and i cant seem to make the search button work without the onSucess. Any idea how can i restructure this code? 
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)
  }}
>
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)
  }}
>
anybody here?
rival-black
rival-black•2y ago
Why are you even doing this? Just delete it

Did you find this page helpful?