React 쿼리의 경쟁 조건

Question

반응형 쿼리를 사용하여 Todo 앱을 만들려고 하는데 경쟁 조건 문제가 발생했습니다. 사용자가 새 할 일을 업데이트/생성한 다음 저장을 클릭하는 할 일 페이지가 있습니다. 저장 과정은 사용자의 인터넷 연결 상태에 따라 약 3초 정도 소요될 수 있습니다. 할 일 항목을 편집한 후에도 사용자는 할 일 페이지에 남아 있습니다. 새 할 일 항목을 생성한 후 사용자는 할 일 항목 페이지로 이동합니다.

문제는, 사용자가 할 일을 생성/업데이트한 후 할 일 표시 모달을 클릭하는 경우(이것은 외부 구성 요소이므로 편집할 수 없습니다) 모드는 새로운 할 일인 경우 편집/비어 있기 전에 할 일을 표시합니다

문제를 디버그하면 모달이 켜진 후 반응 쿼리가 할 일 항목을 가져오는 것을 볼 수 있습니다. 모달을 닫았다가 다시 열면 업데이트된 할 일 항목이 표시됩니다.

const {todo} = useTodoQuery()

const openModal = () =>

반품 (
   <TodoModalButton onClick={openModal}>Todo 미리보기 모달 열기</TodoModalButton>
)

const useTodoQuery = () =>
  const {data, ...rest} = useQuery(['todo', todoId], async () => {
    if (todoId) {
      반환 대기 getTodo(todoId)
    }
    null을 반환;
  })

  {데이터, ...휴식}을 반환합니다.
}

const queryClient = new QueryClient({
  기본옵션: {
    서스펜스: 거짓,
    keepPreviousData: 사실,
  }
})

keepPreviousData를 제거하면 할 일이 정의되지 않습니다.

const todoMutation = useMutation(
    ['할 것'],
    getUpdatedTodo,
    {onSuccess: () => queryClient.invalidateQueries(['todo', todoId])}
  );

다음을 사용해 보았습니다. {onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)} 그러나 그 효과는 이상적이지 않습니다.

Answer 1

onSuccess 콜백을 기다렸다가 모델을 연 후 :) 해결됨 :D

불가능하다면 자세한 내용을 알려주세요