es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cuándo establecer el valor inicial del formulario?

22 Jul, 2023 Programación

Tengo estos códigos, si el usuario abre el cuadro de diálogo del formulario por primera vez, funciona bien.

function PostFormDialog({ id }) {
  const queryClient = useQueryClient()
  const post = useQuery(['post', id], () => fetchPost(id))
  const update = useMutation(() => updatePost(formValue), {
    onSuccess: () => {
      queryClient.invalidateQueries(['post', id])
    },
  })
  if (post.isLoading) {
    return 'cargando...'
  }
  return (
    <dialog {...dialogprops}="">
      <form initialvalue="{post}" onsubmit="{update.mutate}"></form>
    </dialog>
  )
}

Pero cuando envío el formulario una vez, abro rápidamente la caja de diálogo nuevamente y mostrará los últimos datos. Los datos se están recuperando en este momento, pero isLoading es falso.

Quiero:

  • Después de abrir la caja de diálogo del formulario, si los datos están desactualizados, espera a que se carguen los datos y muestra “cargando…”
  • Si estás editando el formulario, cambiar de pestaña puede provocar la recuperación de datos, pero en este momento no se muestra “cargando…”

Esto es difícil para mí. Puedo evitarlo usando actualizaciones optimistas, ¿pero hay una mejor manera?

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Para abordar el problema de que el diálogo del formulario no muestra “cargando…” cuando los datos están desactualizados, puedes agregar la opción staleTime al gancho useQuery. Esto permitirá que la consulta siga utilizando los datos en caché durante cierto tiempo antes de volver a obtener los datos. Puedes configurar este valor a un número más alto para dar más tiempo al usuario para enviar el formulario y evitar el problema.

    const post = useQuery(['post', id], () => fetchPost(id), {
  staleTime: 5000, // 5 segundos
});

    Para evitar que se muestre “cargando…” al cambiar de pestaña, puedes utilizar el gancho useIsFetching de react-query. Este devolverá un valor booleano que indica si hay alguna consulta en curso. Puedes utilizar este valor para mostrar “cargando…” solo cuando haya una búsqueda activa.

    const isFetching = useIsFetching();
if (post.isFetching || isFetching) {
  return 'cargando...';
}

    Al combinar estas dos soluciones, puedes asegurarte de que se muestre “cargando…” cuando sea necesario y evitar el problema de mostrar datos incorrectos en el diálogo del formulario.

Comments are closed.