function App() {
  const mutation = useMutation({
    mutationFn: (newTodo) => {
      return axios.post('/todos', newTodo)
    },
  })
 
  return (
    <div>
      {mutation.isPending ? (
        '할 일을 추가하는 중...'
      ) : (
        <>
          {mutation.isError ? (
            <div>오류가 발생했습니다: {mutation.error.message}</div>
          ) : null}
 
          {mutation.isSuccess ? <div>할 일이 추가되었습니다!</div> : null}
 
          <button
            onClick={() => {
              mutation.mutate({ id: new Date(), title: '빨래하기' })
            }}
          >
            할 일 만들기
          </button>
        </>
      )}
    </div>
  )
}
 
typescript복사

// React 16 이하에서는 작동하지 않습니다
const CreateTodo = () => {
  const mutation = useMutation({
    mutationFn: (event) => {
      event.preventDefault()
      return fetch('/api', new FormData(event.target))
    },
  })
 
  return <form onSubmit={mutation.mutate}>...</form>
}
 
// 이렇게 하면 작동합니다
const CreateTodo = () => {
  const mutation = useMutation({
    mutationFn: (formData) => {
      return fetch('/api', formData)
    },
  })
  const onSubmit = (event) => {
    event.preventDefault()
    mutation.mutate(new FormData(event.target))
  }
 
  return <form onSubmit={onSubmit}>...</form>
}
 
typescript복사

const CreateTodo = () => {
  const [title, setTitle] = useState('')
  const mutation = useMutation({ mutationFn: createTodo })
 
  const onCreateTodo = (e) => {
    e.preventDefault()
    mutation.mutate({ title })
  }
 
  return (
    <form onSubmit={onCreateTodo}>
      {mutation.error && (
        <h5 onClick={() => mutation.reset()}>{mutation.error}</h5>
      )}
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <br />
      <button type="submit">Create Todo</button>
    </form>
  )
}
 
typescript복사

useMutation({
  mutationFn: addTodo,
  onMutate: (variables) => {
    // 뮤테이션이 곧 일어날 것입니다!
 
    // 선택적으로 롤백 등에 사용할 데이터를 포함한 컨텍스트를 반환합니다
    return { id: 1 }
  },
  onError: (error, variables, context) => {
    // 오류가 발생했습니다!
    console.log(`ID가 ${context.id}인 낙관적 업데이트를 롤백합니다`)
  },
  onSuccess: (data, variables, context) => {
    // 성공입니다!
  },
  onSettled: (data, error, variables, context) => {
    // 오류든 성공이든 상관없습니다!
  },
})
 
typescript복사

useMutation({
  mutationFn: addTodo,
  onSuccess: async () => {
    console.log("나는 첫 번째입니다!")
  },
  onSettled: async () => {
    console.log("나는 두 번째입니다!")
  },
})
 
typescript복사

useMutation({
  mutationFn: addTodo,
  onSuccess: (data, variables, context) => {
    // 나는 먼저 실행됩니다
  },
  onError: (error, variables, context) => {
    // 나는 먼저 실행됩니다
  },
  onSettled: (data, error, variables, context) => {
    // 나는 먼저 실행됩니다
  },
})
 
mutate(todo, {
  onSuccess: (data, variables, context) => {
    // 나는 두 번째로 실행됩니다!
  },
  onError: (error, variables, context) => {
    // 나는 두 번째로 실행됩니다!
  },
  onSettled: (data, error, variables, context) => {
    // 나는 두 번째로 실행됩니다!
  },
})
 
typescript복사

useMutation({
  mutationFn: addTodo,
  onSuccess: (data, error, variables, context) => {
    // 3번 호출됩니다
  },
})
 
const todos = ['할 일 1', '할 일 2', '할 일 3']
todos.forEach((todo) => {
  mutate(todo, {
    onSuccess: (data, error, variables, context) => {
      // 어떤 뮤테이션이 먼저 해결되든 상관없이
      // 마지막 뮤테이션('할 일 3')에 대해 한 번만 실행됩니다
    },
  })
})
 
typescript복사

const mutation = useMutation({ mutationFn: addTodo })
 
try {
  const todo = await mutation.mutateAsync(todo)
  console.log(todo)
} catch (error) {
  console.error(error)
} finally {
  console.log('done')
}
 
typescript복사

const mutation = useMutation({
  mutationFn: addTodo,
  retry: 3,
})
 
typescript복사

const queryClient = new QueryClient()
 
// "addTodo" 뮤테이션 정의
queryClient.setMutationDefaults(['addTodo'], {
  mutationFn: addTodo,
  onMutate: async (variables) => {
    // 현재 todos 목록에 대한 쿼리 취소
    await queryClient.cancelQueries({ queryKey: ['todos'] })
 
    // 낙관적 todo 생성
    const optimisticTodo = { id: uuid(), title: variables.title }
 
    // 낙관적 todo를 todos 목록에 추가
    queryClient.setQueryData(['todos'], (old) => [...old, optimisticTodo])
 
    // 낙관적 todo와 함께 컨텍스트 반환
    return { optimisticTodo }
  },
  onSuccess: (result, variables, context) => {
    // todos 목록에서 낙관적 todo를 결과로 교체
    queryClient.setQueryData(['todos'], (old) =>
      old.map((todo) =>
        todo.id === context.optimisticTodo.id ? result : todo,
      ),
    )
  },
  onError: (error, variables, context) => {
    // todos 목록에서 낙관적 todo 제거
    queryClient.setQueryData(['todos'], (old) =>
      old.filter((todo) => todo.id !== context.optimisticTodo.id),
    )
  },
  retry: 3,
})
 
// 컴포넌트에서 뮤테이션 시작:
const mutation = useMutation({ mutationKey: ['addTodo'] })
mutation.mutate({ title: 'title' })
 
// 기기가 오프라인 상태 등의 이유로 뮤테이션이 일시 중지된 경우,
// 애플리케이션 종료 시 일시 중지된 뮤테이션을 탈수화할 수 있습니다:
const state = dehydrate(queryClient)
 
// 애플리케이션 시작 시 뮤테이션을 다시 수화할 수 있습니다:
hydrate(queryClient, state)
 
// 일시 중지된 뮤테이션 재개:
queryClient.resumePausedMutations()
 
javascript복사

const persister = createSyncStoragePersister({
  storage: window.localStorage,
})
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // 24시간
    },
  },
})
 
// 페이지 새로고침 후 일시 중지된 뮤테이션을 재개할 수 있도록 기본 뮤테이션 함수 설정
queryClient.setMutationDefaults(['todos'], {
  mutationFn: ({ id, data }) => {
    return api.updateTodo(id, data)
  },
})
 
export default function App() {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister }}
      onSuccess={() => {
        // localStorage에서 초기 복원이 성공한 후 뮤테이션 재개
        queryClient.resumePausedMutations()
      }}
    >
      <RestOfTheApp />
    </PersistQueryClientProvider>
  )
}
 
javascript복사

const mutation = useMutation({
  mutationFn: addTodo,
  scope: {
    id: 'todo',
  },
})
 
typescript복사