refetch, invalidateQueries / useQuery, useMutation

1. refetch:

• 즉시 데이터를 다시 가져옵니다: refetch는 호출된 즉시 쿼리를 다시 실행하여 데이터를 갱신합니다.
• 사용자 상호작용에 적합: 특정 이벤트(예: 버튼 클릭, 사용자 액션) 후 데이터를 즉시 갱신해야 할 때 적합합니다.
• 단일 호출: 해당 컴포넌트에서 refetch()를 호출하면, 쿼리의 데이터를 한 번만 갱신합니다.

적합한 경우:

• 데이터가 특정 사용자 액션 이후 즉시 새로 고쳐져야 하는 경우.
• 예를 들어, 사용자가 버튼을 눌러 직접 데이터를 다시 가져오게 하는 상황.

2. invalidateQueries:

• 쿼리를 무효화하고 필요할 때 다시 실행: 쿼리가 "더 이상 유효하지 않다"고 표시되며, react-query가 적절한 시점(예: 컴포넌트가 다시 마운트되거나, 페이지 포커스가 바뀔 때)에 쿼리를 자동으로 재실행하여 데이터를 가져옵니다.
• 자동화된 데이터 갱신: invalidateQueries는 데이터를 즉시 다시 가져오는 것이 아니라, 쿼리를 "무효화"하여 다음번에 필요할 때 데이터를 다시 가져오게 만듭니다.
• 유연성: 쿼리 무효화 후 여러 이벤트나 조건에 의해 자동으로 갱신되므로, 특정 시점에서 다시 데이터를 가져오는 상황에 적합합니다.

적합한 경우:

• 데이터를 즉시 갱신할 필요는 없지만, 컴포넌트가 다시 마운트되거나 다른 트리거 조건에 의해 데이터를 갱신하고 싶은 경우.
• 데이터가 여러 곳에서 사용되고, 일관된 데이터 상태를 유지해야 할 때.

 

1. useQuery: 데이터를 가져올 때 사용 (읽기 작업)

• 목적: 서버에서 데이터를 **조회(fetch)**할 때 사용합니다.
• 동작 방식: 주로 GET 요청을 처리하며, 캐시된 데이터를 활용하고 자동으로 데이터를 동기화하는 방식으로 동작합니다.
• 특징:
  • 서버에서 데이터를 가져와서 클라이언트에서 사용하는 데 최적화되어 있습니다.
  • 데이터를 캐싱하고, 캐시된 데이터를 적절한 시점에 갱신하는 기능을 제공합니다.
  • 기본적으로 캐싱, 자동 리패칭, 중복 요청 방지 등의 기능을 가지고 있습니다.
  • 자동으로 리렌더링: 쿼리가 완료되거나 데이터가 갱신될 때 컴포넌트를 자동으로 리렌더링합니다.

import { useQuery } from '@tanstack/react-query';

// 서버에서 데이터를 조회하는 예시
const { data, error, isLoading } = useQuery('fetchData', fetchDataFunction);

 

2. useMutation: 데이터를 변경할 때 사용 (쓰기 작업)

• 목적: 서버로 데이터를 전송하거나 수정, 삭제할 때 사용됩니다.
• 동작 방식: 주로 POST, PUT, DELETE 등의 요청을 처리하며, 상태 변경이나 비동기 작업(예: 폼 제출, 데이터 업데이트)을 처리하는 데 사용됩니다.
• 특징:
  • 데이터를 변경하는 작업에 사용됩니다.
  • 서버와의 상호작용이 성공하거나 실패했을 때 실행할 콜백 함수를 설정할 수 있습니다.
  • 낙관적 업데이트(Optimistic Update): 서버 요청이 성공하기 전에 UI 상태를 먼저 업데이트하는 방식도 가능합니다.
  • 자동으로 리패칭되지 않음: 서버에 요청한 후, 별도로 쿼리를 다시 실행하거나 쿼리를 무효화(invalidate)하여 데이터를 갱신할 필요가 있습니다.

import { useMutation } from '@tanstack/react-query';

// 서버에 데이터를 전송하는 예시
const mutation = useMutation(submitDataFunction, {
  onSuccess: () => {
    // 성공적으로 데이터를 보낸 후 실행할 콜백
  },
  onError: (error) => {
    // 실패 시 처리할 콜백
  },
});