React 쿼리의 경쟁 조건
<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>
