[Next.js] Tanstack Query Mutations

 

 

Tanstack Query의 두 번째 포스트입니다 Tanstack Query로 받아온 데이터를 변경할 때 조금 더 효과적으로 처리할 수 없을까요?
그 답은 Mutations에 있습니다 

💡 Mutations을 사용하는 이유

비동기적인 데이터 변경 관리

• Mutations는 데이터를 변경하는 비동기 작업을 다룰 때 사용됩니다. 예를 들어, 서버에 데이터를 POST, PUT, DELETE 하는 요청을 보낼 때 사용됩니다. 이를 통해 클라이언트에서 데이터를 변경하고 서버와 동기화할 수 있습니다

자동적인 캐시 업데이트

• 자동 캐시 업데이트는 Tanstack Query의 주요 특징 중 하나입니다. mutation 후 서버로부터 받은 응답 데이터를 자동으로 캐시에 반영하여, 이후의 조회 요청이 최신 상태의 데이터를 제공할 수 있도록 합니다.

서버 상태의 관리

• mutations를 통해 서버 상태를 변경할 수 있으며, 이를 통해 클라이언트와 서버 간의 데이터 동기화를 관리할 수 있습니다. 서버로 보내는 요청, 응답 및 오류 처리를 쉽게 구현할 수 있습니다.

UI 업데이트 관리

• 서버에 요청을 보내고 성공적으로 응답을 받으면, Tanstack Query는 자동으로 UI를 업데이트하여 최신 데이터를 반영합니다. 이를 통해 사용자에게 반영되는 UI가 항상 정확하고 최신 상태로 유지됩니다.

이 밖에도 오류 처리와 리트라이, 동시성 처리, 서버 데이터를 효율적으로 처리하고 간단한 코드 구현 같은 장점 또한 가지고 있습니다

실제로 사용해보니 데이터 변경을 위해 데이터를 서버에서 불러와 변경을 하고 다시 상태 업데이트를 해주고 UI 업데이트를 처리하는 과정이 많이 간소화되어 좋다고 느꼈습니다

 

그럼 간단한 Mutations을 사용해 보겠습니다

 

💡 Mutations 사용

Mutations의 동작 순서를 먼저 보도록 하겠습니다

Mutations 순서도

 

먼저 useQuery를 이용하여 데이터를 패칭 받아온 후를 가정 합니다

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

const myMutation = async (newData) => {
  const response = await fetch('/api/data', {
    method: 'POST',
    body: JSON.stringify(newData),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  return response.json();
};

function MyComponent() {
  const mutation = useMutation({
    mutationFn: myMutation,  // 서버와 통신하는 함수
    onSuccess: () => {
      // 성공적으로 데이터를 수정한 후 실행할 코드
      console.log('Mutation 성공');
    },
    onError: (error) => {
      // 오류가 발생했을 때 실행할 코드
      console.error('Mutation 오류:', error);
    },
    onSettled: () => {
      // 성공 여부와 관계없이 완료 후 실행할 코드
      console.log('Mutation 완료');
    },
  });

  const handleSubmit = async () => {
    const newData = { name: 'New Item', price: 100 };
    mutation.mutate(newData); // 서버에 데이터를 보내는 Mutation 호출
  };

  return (
    <div>
      <button onClick={handleSubmit} disabled={mutation.isLoading}>
        {mutation.isLoading ? 'Loading...' : 'Submit Data'}
      </button>
      {mutation.isError && <p>Error: {mutation.error.message}</p>}
    </div>
  );
}

 

💡 이후 Mutation의 응답 캐시 관리

Mutation은 데이터 변경을 위한 것이기 때문에 useQuery로 조회한 캐시 데이터를 업데이트하거나 무효화해야 할 경우가 많습니다 onSuccess 또는 onSettled 콜백에서 queryClient.invalidateQueries를 사용하여 캐시 된 데이터를 무효화하거나 새로 고칠 수 있습니다.

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

const updateData = async (newData) => {
  const response = await fetch('/api/update', {
    method: 'PUT',
    body: JSON.stringify(newData),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  return response.json();
};

function MyComponent() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: updateData,
    onSuccess: () => {
      queryClient.invalidateQueries(['data']); // 'data'라는 키를 가진 캐시를 무효화
    },
  });

  const handleSubmit = async () => {
    const newData = { name: 'Updated Item', price: 150 };
    mutation.mutate(newData); // Mutation 호출
  };

  return (
    <div>
      <button onClick={handleSubmit}>
        {mutation.isLoading ? 'Updating...' : 'Update Data'}
      </button>
    </div>
  );
}

 

여기서는 onSuccess에서 queryClient.invalidateQueriess를 사용하여 데이터를 새로 가져오면 됩니다

 

📌 결론

제가 느낀 Tanstack Query Mutations는

• 코드 복잡도로 인한 무분별한 상태 업데이트를 방지할 수 있습니다 
• 데이터 업데이트의 중복 문제를 해결할 수 있습니다
• 캐시 업데이트로 인한 성능 상승효과를 기대할 수 있습니다