캐시 데이터 무효화
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,
);
}