Keadaan perlumbaan dalam React Query

Question

Saya cuba mencipta apl Todo menggunakan pertanyaan reaktif, tetapi saya menghadapi masalah keadaan perlumbaan. Saya mempunyai halaman tugasan di mana pengguna mengemas kini/membuat tugasan baharu dan kemudian mengklik simpan. Proses menyimpan mungkin mengambil masa lebih kurang 3 saat bergantung pada sambungan internet pengguna. Selepas mengedit item tugasan, pengguna kekal dalam halaman tugasan. Selepas membuat item tugasan baharu, pengguna akan menavigasi ke halaman item tugasan.

Masalahnya, Apabila pengguna membuat/mengemas kini todo dan kemudian mengklik tunjukkan todo modal (ini adalah komponen luaran, saya tidak boleh mengeditnya) Mod memaparkan tugasan sebelum mengedit/kosongkan jika ia adalah tugasan baharu

Apabila saya nyahpepijat isu, saya dapat melihat bahawa pertanyaan tindak balas mendapat item todo selepas modal dihidupkan. Jika saya menutup modal dan membukanya semula, ia memaparkan item tugasan yang dikemas kini.

const {todo} = useTodoQuery()

const openModal = () =>

kembali (
   <TodoModalButton onClick={openModal}>Open Todo Preview Modal</TodoModalButton>
)</pra>
<pre class="brush:php;toolbar:false;">const useTodoQuery = () =>
  const {data, ...rest} = useQuery(['todo', todoId], async () => {
    jika (todoId) {
      pulang tunggu getTodo(todoId)
    }
    kembali null;
  })

  pulangkan {data, ...rehat}
}

const queryClient = new QueryClient({
  pilihan lalai: {
    saspens: palsu,
    keepPreviousData: benar,
  }
})

Jika saya mengalih keluar keepPreviousData, todo akan tidak ditentukan.

const todoMutation = useMutation(
    ['todo'],
    getUpdatedTodo,
    {onSuccess: () => queryClient.invalidateQueries(['todo', todoId])}
  );
Saya cuba menggunakan
{onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)}
Tetapi kesannya tidak ideal. 
            

Answer 1

Hanya tunggu panggilan balik onSuccess dan selepas membuka model :) Selesai :D

Jika tidak boleh, sila berikan butiran lanjut