쿼리가 even 하게 캐싱되지 않았다.. 리액트 쿼리로 데이터를 관리하는 몇 가지 방법

[yunseorim1116]

1. cancelQueries: 뮤테이션 전 진행 중인 요청 취소

뮤테이션을 수행하기 전 동일한 쿼리가 이미 실행 중이라면 불필요한 서버 요청을 중단하고 싶다면 cancelQueries를 사용하여 특정 쿼리 키에 대한 진행 중인 요청을 취소할 수 있습니다.

예를 들어 게시글을 수정하는 상황에서 이미 게시글 데이터를 가져오는 API 요청이 실행 중일 수 있습니다. 이때 요청을 취소하고 바로 뮤테이션을 실행하여 중복된 요청을 방지할 수 있습니다.

const queryClient = useQueryClient();

const mutation = useMutation(updatePost, {
  onMutate: async (newData) => {
    await queryClient.cancelQueries(['post', newData.id]);
  },
  // 이후 성공, 실패, 완료 콜백을 정의
});

2. invalidateQueries: 뮤테이션 후 데이터 새로 고침

변경된 데이터를 서버에서 다시 가져와야 할 때는 invalidateQueries를 사용합니다. 이 메서드는 특정 쿼리를 "유효하지 않은" 상태로 만들어, React Query가 해당 데이터를 다시 페칭하도록 만듭니다.

const queryClient = useQueryClient();

const mutation = useMutation(updatePost, {
  onSuccess: () => {
    // 'post' 쿼리를 무효화하고 다시 데이터를 가져오게 함
    queryClient.invalidateQueries(['post', postId]);
  },
});

3. refetchQueries

invalidateQueries는 특정 쿼리를 무효화하여 해당 데이터가 다시 필요할 때 자동으로 새로고침이 일어나도록 하지만 refetchQueries는 즉시 해당 쿼리를 다시 페칭합니다.

const mutation = useMutation(updatePost, {
  onSuccess: () => {
    queryClient.refetchQueries(['post', postId]); // 즉시 데이터 새로 고침
  },
});

즉시 데이터를 다시 불러오고 싶을 때는 invalidateQueries 대신 refetchQueries를 사용할 수 있습니다.

option

exact: 기본적으로 refetchQueries는 키가 일치하는 모든 쿼리를 다시 가져오지만,
exact: true 옵션을 추가하면 정확히 일치하는 쿼리만 다시 가져옵니다.

refetchQueries가 유용한 경우

1. 즉각적인 동기화가 필요할 때
2. 의존성 있는 데이터 업데이트
3. 실시간 데이터 페칭

4. setQueryData: 낙관적 업데이트(Optimistic Update)

데이터가 서버에 반영되기 전, 사용자에게 즉시 변경된 상태를 보여주고 싶을 때는 낙관적 업데이트(Optimistic Update) 기법을 사용할 수 있습니다. 이 방식은 서버에서 성공적으로 처리된다고 가정하고 클라이언트에 먼저 반영하는 것입니다. (UX GOOOOD)

5. getQueryData: 캐시된 데이터 활용

현재 캐시된 데이터를 가져올 때 사용됩니다. 서버로부터 새로 데이터를 페칭하지 않고 캐시에서 즉시 데이터를 조회할 수 있습니다. 이를 활용하면 이미 로드된 데이터를 재사용할 수 있어 성능을 최적화할 수 있습니다.

예를 들어 게시물을 수정할 때 이미 캐시에 저장된 데이터를 활용해 UI를 업데이트할 수 있습니다.

const queryClient = useQueryClient();

// 캐시된 데이터 가져오기
const cachedPost = queryClient.getQueryData(['post', postId]);

if (cachedPost) {
  console.log('캐시에서 가져온 데이터:', cachedPost);
} else {
  console.log('캐시된 데이터가 없습니다.');
}

6. Prefetching: 미리 데이터 가져오기

화면 이동 전에 필요한 데이터를 미리 서버에서 가져오는 기법입니다.
사용자가 특정 작업을 하기 전 미리 데이터를 준비해두면 UX가 더 좋아집니다! 사용자가 상세 페이지로 이동하기 전에 해당 게시물의 데이터를 미리 받아두면 페이지가 로드될 때 바로 데이터를 보여줄 수 있습니다.

const queryClient = useQueryClient();

// 특정 페이지로 이동하기 전에 데이터를 미리 받아오기
const prefetchPost = (postId) => {
  queryClient.prefetchQuery(['post', postId], () => fetchPostData(postId));
};

이 코드를 사용하면 사용자가 특정 게시물에 접근하기 전에 백그라운드에서 데이터를 미리 로드할 수 있습니다.

[Duck-98]

좋은 글이네요..! 잘 읽고 갑니다 🧐

[yunseorim1116]

감사합니다 ^____^ 추가 코멘트도 언제든 환영입니다~!~!

[lukasjhan]

잘정리해주셨네요. 어떤상황에서 어떻게 사용할지 생각해볼수있어서 정말 좋네요.

위 좋은 방식이 적용된 예제 사이트같은걸 하나 같이 만들어보면 어떨까요?