인프런 커뮤니티 질문&답변

[문제점]

PostEditView 에서 post 데이터를 수정한 후,

PostDetailView 로 이동했을 때, 수정된 데이터가 아닌

이전 데이터가 출력되는 문제 발생.

[테스팅]

json-server 를 최신 버전으로 업해서 테스트 >> 개선안됨.

다양하게 코드를 변경하며 테스트를 해봤지만 개선안됨.

PostDetailView 에서 ref, reactive 를 변경하며 다양하게 시도했지만 개선 안됨.

[원인]

1. updatePost 함수가 수행 후 반환 하더라도 json-server
   내부적으로 실제 데이터 갱신에 시간이 걸리는 것이 아닌지 의심됨.

2. udatePost 후, getPostById 로 데이터를 가져와 콘솔에 출력하면, 갱신되기 전의 데이터가 출력되는 것으로 보아 vue cache or refresh 문제는 아닐 것으로 생각됨.

[임시해결]

const onUpdate = async () => {
	try {
		await updatePost(props.id, form);
		nextTick(async ()=> {
			const { data } = await getPostById(props.id);
			console.log('After updatePost, data: ', data);
			// router.push({ name: 'PostDetail', props: {id: props.id} });
			router.back();	
		});		
	} catch (error) {
		console.log('onUdate error: ', error);
	}
};

다음 Tick 에서 getPostById 함수를 이용하여 갱신된 데이터를 조회(시간 지연 및 데이터 확인)하고 PostDetailView 로 이동하면 제대로 출력됨...

a. 위 코드에서 출력되는 데이터는 갱신 전의 데이터가 출력됨.
b. 위 코드에서 getPostById 로 데이터 조회를 빼면 PostDetailView 에 갱신 이전 데이터가 출력됨.

c. 위 코드에서 router push, go, back 함수 무엇을 쓰던 현상은 동일함.

보다 정확한 문제 원인 또는 문제 해결 방법이 있을까요 ??