QueryClient - setQueryData

---

queryClient.setQueryData

쿼리의 캐시된 데이터를 즉시 업데이트하는데 사용할 수 있는 동기 함수

queryClient.setQueryData(queryKey, updater)

---

플레이리스트의 이름을 변경하는 작업에서 처음에는 invalidateQueries를 사용했음.
그런데 이름이 변경되지 않는 거임.

1. 그래서 api 호출이 잘못되었나?싶어 확인해보니 → 이것의 문제는 아니었음.
2. 그럼 invalidateQueries의 qeuryKey가 잘못되었나? → 아님.
3. 그럼 queryKey 선택을 잘못했나? → 아님.
4. 그럼 invalidateQueries으로 refetch가 안되나? → 이것도 아니었음.

왜 위 문제들이 다 아니냐?
1. Network 탭에서 확인한 결과, api 요청들은 제대로 이루어지고 있음.
2. 새로 받아온 데이터들이 바로는 적용이 안되지만, 시간이 좀 지나면 새로운 데이터로 패칭되어있음.

그럼 문제는 비동기.
UI에서 보고 있는 시점은 아직 이전 캐시 데이터가 그대로였기 때문에 fetch가 끝나기 전까지 이름이 안바뀌었던거.

그래서 이 문제를 해결하기 위해 setQueryData를 사용해서 즉시 캐시 업데이트했음.

export const useChangePlaylistDetail = () => {
 	...,
    onSuccess: async (data, variables) => {
      queryClient.setQueryData(["playlist-detail", variables.playlist_id], (old: any) => ({
        ...old,
        name: variables.name,
      }));
      ...
    },
  });
};

ㅇㅇ refetch 되었다ㅜ

queryClient