캐시 데이터 다루기(한입sns)

짱효·2026년 1월 6일

캐시 데이터 무효화

onSuccess: () => {
  queryClient.invalidateQueries({
    queryKey: ["todos"],
  });
},


텐스텍 쿼리에서 리스트 추가하고 get해올때 사용하기

```js
onSuccess: (newTodo) => {
queryClient.setQueryData<Todo[]>(QUERY_KEYS.todo.list,(prevTodos) => {
if (!prevTodos) return [newTodo];
return [...prevTodos, newTodo];
})
},

낙관적 업데이트

데이터 수정 요청이 성공할 것이라 낙관
요청을 보내자마자 데이터 업데이트
(좋아요, 채팅에서 활용)

  • 인터넷이 느려도 바로바로 먼저 적용되어있게 보여줄수있따.

  • 요청이 성공하기도전에 미리 사용자에게 응답을 제공

뮤테이트 비동기로 시작될때 바로 적용되는거 캐시를 수정함

const queryClient = useQueryClient()


onMutate: (updatedTodo) => {
	queryClient.setQueryData<Todo[]>(
      //어떤 캐시데이터?
    QUERY_KEYS.todo.list,
      //캐시데이터를 어떻게?
    (preTodos) => {
    if(!preTodos) return [];
    return prevTodos.map(prevTodo => prevTodo.id === updatedTodo.id ? {...prevTodo,...updatedTodo} : prevTodo,
    );
}


profile
✨🌏확장해 나가는 프론트엔드 개발자입니다✏️

0개의 댓글