[Next.js] 낙관적 업데이트(Optimistic Update) with react query

Optimistic Update

• 좋아요 등을 할때 성공할 것이라고 예측하고 미리 처리해버리는 전략
  • 로딩 state가 없기 때문에 사용자 경험이 좋아짐

onMutate 부분에서 
queryClient.setQueryData()를 해주면 됨
성공시 -> onSettled 로 데이터 가져오기
실패시 -> onError에 과거로 롤백하는 코드를 같이 써줘야 함

ex)

const heart = useMutation({
	mutionFn : () => {
		return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/${id}/heart`, {
		method: 'post',
		credentials : 'include',
		})
	},
	onMutate : () => {
	const queryCache = queryClient.getQueryCache();
	const queryKeys = queyCache.getAll().map(cache =>
	cache.queryKey)
	queryKeys.forEach((queryKey) => {
		if(queryKey[0] === 'posts'){
			const value = queryClient.getQueryData(queryKey);
			if(Array.isArray(value)){
				const index = value.findIndex((v) => v.postId === postId);
				if(index>-1) {
					const shallow = [...value];
					shallow[index] = {
					...shallow[index]
					Hearts: [{userId : userId : session?.user?.email,
						_count : {
							...shallow[index]._count,
							Hearts: shallow[index]._count +1,
						}
					}]
					}
					queryClient.setQueryData(queryKey, shallow);
				}
			} else if(value) {
				if(value.postId === postId){
				const shallow = {...value};
				shallow = {
					...value
					Hearts: [{userId : userId : session?.user?.email,
						_count : {
							...value._count,
							Hearts: value._count +1,
						}
					}]
					}
					queryClient.setQueryData(queryKey, shallow);
				}
			}
		}
	})
		
	},
	onError : () => {
	
	},
	onSettled : () => {
	
	}
})