Tengo una página donde actualizo la información tan pronto como hago clic en el botón 'Enviar' y quiero actualizar la información de la pantalla sin tener que volver a cargar la página.

Este es el botón de enviar:

 import React from 'react'; import { useSaveOrderItemsForList } from '../../hooks/Lists/useSaveOrderItemsForList'; import ErrorIndicator from '../shared/ErrorIndicator'; import LoadingButton from '../shared/LoadingButton'; import { valueState as valueStateAtom } from '../../atoms/orderItemsAtom'; import { useSetRecoilState } from 'recoil'; export default function SaveOrderItemsButton({ orderItems, listID }) { const { isError, error, isLoading, mutate } = useSaveOrderItemsForList(orderItems, listID); const setValue = useSetRecoilState(valueStateAtom); return ( <div className={'w-100'}> <br /> <ErrorIndicator isError={isError} error={error} /> <LoadingButton className={'w-100'} variant={'success'} loading={isLoading} onClick={() => { mutate(); setValue([]); window.location.reload(); }} > Save </LoadingButton> </div> ); }

Este es el gancho personalizado useSaveOrderItemsForList :

 import { getToken } from '../../tokens/getToken'; import { basePath } from '../../config/basePath'; import { getTokenAuthHeaders } from '../../functions/sharedHeaders'; import { useMutation, useQueryClient } from 'react-query'; async function saveOrderItemsForList({ orderItems, listID }) { const token = await getToken(); const response = await fetch(`${basePath}/lists/save_order_items/${listID}`, { method: 'PUT', body: JSON.stringify({ orderItems }), headers: getTokenAuthHeaders(token) }); return response.json(); } export function useSaveOrderItemsForList(orderItems, listID) { const queryClient = useQueryClient(); return useMutation( () => { return saveOrderItemsForList({ orderItems, listID }); }, { onSuccess: () => { return queryClient.invalidateQueries('lists'); } } ); }

Y este es el punto final donde se pasa el evento onClick y luego carga el resultado:

 router.put('/save_order_items/:id', TokenController.isAValidToken, async (req, res) => { const { orderItems } = req.body; try { const list = await ListsController.updateOrderItems(orderItems, req.params.id); res.json(list); } catch (error) { ErrorController.errorCallback(error, res); } });

¿Hay alguna manera de lograr lo que estoy buscando, del lado del servidor o del cliente?