<p>반응형 쿼리를 사용하여 Todo 앱을 만들려고 하는데 경쟁 조건 문제가 발생했습니다. 사용자가 새 할 일을 업데이트/생성한 다음 저장을 클릭하는 할 일 페이지가 있습니다. 저장 과정은 사용자의 인터넷 연결 상태에 따라 약 3초 정도 소요될 수 있습니다. 할 일 항목을 편집한 후에도 사용자는 할 일 페이지에 남아 있습니다. 새 할 일 항목을 생성한 후 사용자는 할 일 항목 페이지로 이동합니다. </p> <p>문제는, 사용자가 할 일을 생성/업데이트한 후 할 일 표시 모달을 클릭하는 경우(이것은 외부 구성 요소이므로 편집할 수 없습니다) 모드는 새로운 할 일인 경우 편집/비어 있기 전에 할 일을 표시합니다</p> <p>문제를 디버그하면 모달이 켜진 후 반응 쿼리가 할 일 항목을 가져오는 것을 볼 수 있습니다. 모달을 닫았다가 다시 열면 업데이트된 할 일 항목이 표시됩니다. </p> <pre class="brush:php;toolbar:false;">const {todo} = useTodoQuery() const openModal = () => 반품 ( <TodoModalButton onClick={openModal}>Todo 미리보기 모달 열기</TodoModalButton> )</pre> <pre class="brush:php;toolbar:false;">const useTodoQuery = () => const {data, ...rest} = useQuery(['todo', todoId], async () => { if (todoId) { 반환 대기 getTodo(todoId) } null을 반환; }) {데이터, ...휴식}을 반환합니다. }</pre> <pre class="brush:php;toolbar:false;">const queryClient = new QueryClient({ 기본옵션: { 서스펜스: 거짓, keepPreviousData: 사실, } })</pre> <p>keepPreviousData를 제거하면 할 일이 정의되지 않습니다. </p> <pre class="brush:php;toolbar:false;">const todoMutation = useMutation( ['할 것'], getUpdatedTodo, {onSuccess: () => queryClient.invalidateQueries(['todo', todoId])} );</pre> <p>다음을 사용해 보았습니다. <code>{onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)}</code> 그러나 그 효과는 이상적이지 않습니다. </p>