SWR을 사용한 변경과 낙관적 업데이트

swr에서 제공하는 전역 mutate 함수를 사용하면 애플리케이션 어디에서든 어떤 캐시 키에 대해서도 재검증을 실행할 수 있습니다. mutate('/api/user')를 호출하면 useSWR('/api/user')를 사용하는 모든 훅이 데이터를 다시 가져옵니다.

다음과 같이 가져옵니다: import { mutate } from 'swr'. 컴포넌트 외부에서 서버 작업을 수행한 후, 해당 컴포넌트에 직접 접근할 수 있는 연결된 mutate를 사용하지 않고 데이터를 무효화할 때 유용합니다.

mutate의 두 번째 인수로 데이터를 전달합니다: mutate('/api/user', updatedUser)는 네트워크 요청을 보내지 않고 즉시 캐시를 updatedUser로 설정합니다. 이를 로컬 변경이라고 부르기도 합니다.

낙관적 업데이트 후 SWR이 다시 가져오지 않도록 세 번째 인수로 { revalidate: false }를 추가합니다.

useSWRMutation은 자동으로 데이터를 가져오는 대신 사용자가 시작하는 변경 작업(양식 제출이나 버튼 클릭)에 사용하도록 설계되었습니다. 마운트될 때 실행되지 않고 trigger()를 호출할 때만 실행됩니다.

swr/mutation에서 가져옵니다: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

useSWRMutation의 데이터 가져오기 함수는 (key, { arg })를 받으며, 여기서 arg는 trigger()에 전달한 값입니다. 예: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

게시물 데이터를 arg로 사용해 변경 작업을 실행하려면 trigger({ title: '새 게시물', content: '...' })을 호출합니다.

useSWRMutation의 isMutating은 변이 요청이 처리 중인 동안 true입니다. 요청이 진행되는 동안 제출 버튼을 비활성화하고 로딩 표시기를 보여 주어 중복 제출을 방지하는 데 사용할 수 있습니다.

이렇게 하면 원래 useState로 직접 관리해야 하는 isSubmitting 상태 변수를 대신할 수 있습니다.

낙관적 업데이트는 서버가 변경을 확인하기 전에 예상 결과를 사용자 인터페이스에 즉시 적용합니다. 서버 작업이 성공하면 추가로 할 일이 없습니다. 실패하면 업데이트가 이전 상태로 되돌아갑니다.

이 패턴을 사용하면 사용자 인터페이스가 즉각적으로 반응하는 것처럼 느껴집니다. 예를 들어 POST 응답을 기다리지 않고 좋아요 버튼이 즉시 눌린 것처럼 보입니다.

mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true })를 사용합니다. SWR은 캐시를 optimisticValue로 즉시 설정하고 재검증 요청을 보냅니다. 요청에서 예외가 발생하면 이전 값으로 되돌립니다.

rollbackOnError: true 옵션은 올바르게 동작하는 데 필수입니다. 이 옵션이 없으면 실패한 변이 요청으로 인해 오래된 낙관적 데이터가 캐시에 남습니다.

rollbackOnError: true를 설정한 상태에서 변이 요청이 거부되면 SWR은 낙관적 업데이트 전에 저장한 스냅샷으로 캐시를 자동 복원합니다. 수동으로 되돌리는 코드를 작성할 필요가 없습니다.

또한 변이 응답 본문이 useSWR 데이터 구조와 일치하지 않는다면 populateCache: false를 설정해야 합니다. 이렇게 하면 응답이 캐시를 잘못 업데이트하는 일을 방지할 수 있습니다.

useSWR은 바인딩된 mutate를 반환합니다: const { data, mutate } = useSWR('/api/user', fetcher). 이 mutate는 자동으로 '/api/user' 키를 대상으로 하므로 키를 다시 전달할 필요가 없습니다.

데이터 표시를 담당하는 컴포넌트 안에서는 바인딩된 mutate를 사용합니다. 관련 없는 컴포넌트나 유틸리티 함수에서 키를 무효화해야 할 때는 swr의 전역 mutate를 사용합니다.

React Query의 useMutation도 비슷한 trigger/isMutating 패턴을 사용합니다. 주요 차이점은 다음과 같습니다. React Query에서는 queryClient.invalidateQueries를 사용하는 onSuccess 콜백이 관용적인 캐시 무효화 패턴입니다. SWR에서는 캐시를 업데이트할 때 mutate 함수를 직접 사용합니다.

두 도구 모두 낙관적 업데이트와 되돌리기를 지원하지만 API 형태는 다릅니다. 한쪽에 익숙한 팀이라면 다른 쪽도 빠르게 배울 수 있습니다.

변이 요청이 성공한 후에는 세 가지 방법이 있습니다. mutate(key)를 호출해 다시 가져오거나, 응답 본문으로 캐시를 업데이트하거나(API가 업데이트된 리소스를 반환하는 경우), 낙관적 업데이트와 재검증을 함께 사용할 수 있습니다.

목록을 변경하는 경우(항목 추가)에는 새 항목을 덧붙이도록 캐시를 수동으로 업데이트한 다음 서버 상태를 확인하기 위해 재검증합니다. 이렇게 하면 전체 목록을 다시 가져오지 않으면서도 데이터를 일관되게 유지할 수 있습니다.

오류가 발생했을 때 낙관적 업데이트를 자동으로 되돌리려면 SWR의 mutate에 어떤 옵션을 설정해야 합니까?

전역 mutate(key)는 재검증을 시작하고, mutate(key, data)는 다시 가져오지 않고 캐시를 업데이트합니다. useSWRMutation은 trigger(), isMutating 상태 및 extraArg 지원을 통해 사용자가 명시적으로 시작한 변이 요청을 처리합니다. optimisticData와 rollbackOnError: true를 사용하는 낙관적 업데이트는 오류가 발생했을 때 자동으로 복구되므로 사용자 인터페이스가 즉시 반응하는 것처럼 느껴지게 합니다.

useSWR의 바인딩된 mutate는 자체 키를 대상으로 하고, swr의 전역 mutate는 어디서나 사용할 수 있습니다.