In nextj15, router.refresh after router.back doesnt update the server component data

Question

Server Component -> '/projects'Child Client Component -> '/projects/edit'## '/projects' route should ideally be updated with latest data after succesful edit api request and closing of modal##  - if router.back (closing edit modal) and router.refresh are called one after the other, the server component doesnt update. using router.refresh after a setTimeout works##  - is there a better way to go about it this without setTimeout?? and without modifying history with push or replace?'/projects' route -> Server Component 
- fetches projects and lists them as cards

'projects/edit' Edit Modal (Client Component) 
- renders a modal to edit the project details
const onSubmit = async (data: { name: string; description: string }) => {
        try {
            if (type === 'add') {
                await handleCreate(data);
            } else if (type === 'edit' && projectId) {
                await handleUpdate({ projectId, ...data });
            }
            // router.refresh without setTimeout doesnt work
            setTimeout(() => {                   
                router.refresh();
            }, 100);
        } catch (error) {
            console.log(error);
        }
    };

Hook
export function useUpdateProject() {
    const { setLoading } = useLoading();
    const router = useRouter();

const handleUpdate = async ({ projectId, name, description }: { projectId: string; name: string; description: string }) => {
        setLoading(true);

try {
            await updateProject({ projectId, name, description });
            // closes modal
            router.back();
        } catch (err: any) {
            console.log(err)
        } finally {
            setLoading(false);
        }
    };

return { handleUpdate };
}

Service
fetchProjects -> cache:no-store is passed as header

updateProject -> cache:no-store is passed as header

In nextj15, router.refresh after router.back doesnt update the server component data

0 Replies