Tengo problemas para mostrar el mensaje que publico en la API a través de la función hendleSubmit. El mensaje se envía y se agrega a la matriz, pero no se muestra de inmediato, solo se muestra una vez que recargo la página. ¿Puede alguien ayudarme con esto?
aquí está mi código:
export const ConversationForm = () => { const { isLoading, data={} } = useQuery(['conversationForm'], () => conversationMessageService.getConversationMessages()); } declaration of the component and getting data from api in 'data' array <Grid container className={classes.conversation}> <SadStates states={[ { when: isLoading, render: <Loader/> } ]}> {data.items===undefined? <img src={emptyChatIcon} alt={''}/>: <ScrollToBottom mode='bottom' className={classes.scrollBottom}> {data.items.map((message) => { return ( <ConversationMessage message={message} key={message.id} customerName={customerName} userName={userName}/> ); })} </ScrollToBottom> } </SadStates> </Grid>Llamar al componente secundario para imprimir mensaje por mensaje
<Formik initialValues={{ userPhone: userPhone, customerPhone: customerPhone, conversationMessageSender: conversationMessageSender, body: '', conversationMessageType: 1}} onSubmit={handleSubmit}> {({}) => ( <Form> <Grid container> <Grid item> <ConversationInputField inputName='body'/> </Grid> <Grid item> <button type='submit'> <Grid item> <img src={sendIcon} alt={''}/> </Grid> </button> </Grid> </Grid> </Form> )} </Formik>formulario donde llamo al método de publicación al enviar
const handleSubmit = async( values, { setSubmitting }) => { try { await conversationMessageService.createConversatonMessage(values); values.body=''; setSubmitting(false); } catch (error) { console.log(error); } };función handleSubmit
No veo en ninguna parte de su código que vuelva a obtener los datos enviados. ¿Cómo debe saber su front-end que ha cambiado X a Y en su backend?
Vuelva a recuperarlo una vez que lo envió y actualice el estado local que contiene sus datos y/o realice una actualización optimista en su estado local mientras se obtiene el valor correcto de su backend.
React query es una herramienta realmente genial para exactamente esto. La mutación de datos también le permite cancelar consultas anteriores (iniciar una actualización automática) y también realizar actualizaciones optimistas, en las que predice cómo se verá su estado, en caso de que los datos que está manipulando tarden más tiempo en cargarse o sean muy de naturaleza compleja para evitar hacer esperar al usuario.