Race-Bedingungen in React Query

Question

Ich versuche, eine Todo-App mithilfe reaktiver Abfragen zu erstellen, habe jedoch ein Problem mit der Rennbedingung. Ich habe eine Aufgabenseite, auf der der Benutzer eine neue Aufgabe aktualisiert/erstellt und dann auf Speichern klickt. Der Speichervorgang kann je nach Internetverbindung des Benutzers ca. 3 Sekunden dauern. Nach der Bearbeitung eines To-Do-Elements bleibt der Benutzer auf der To-Do-Seite. Nach dem Erstellen eines neuen Aufgabeneintrags navigiert der Benutzer zur Aufgabeneintragsseite.

Das Problem ist, Wenn der Benutzer eine Aufgabe erstellt/aktualisiert und dann auf „Todo modal anzeigen“ klickt (dies ist eine externe Komponente, ich kann sie nicht bearbeiten) Im Modus wird die Aufgabe vor dem Bearbeiten/Leeren angezeigt, wenn es sich um eine neue Aufgabe handelt

Wenn ich das Problem debugge, kann ich sehen, dass die Reaktionsabfrage die Aufgabenelemente abruft, nachdem das Modal aktiviert wurde. Wenn ich das Modal schließe und erneut öffne, werden die aktualisierten Aufgabenelemente angezeigt.

const {todo} = useTodoQuery()

const openModal = () =>

zurückkehren (
   <TodoModalButton onClick={openModal}>Todo-Vorschau-Modal öffnen</TodoModalButton>
)

const useTodoQuery = () =>
  const {data, ...rest} = useQuery(['todo', todoId], async () => {
    if (todoId) {
      Rückkehr warte auf getTodo(todoId)
    }
    null zurückgeben;
  })

  return {data, ...rest}
}

const queryClient = new QueryClient({
  Standardoptionen: {
    Spannung: falsch,
    keepPreviousData: wahr,
  }
})

Wenn ich keepPreviousData entferne, ist die Aufgabe undefiniert.

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

Ich habe es mit versucht {onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)} Aber die Wirkung ist nicht ideal.

Answer 1

只需等待 onSuccess 回调并打开模型后:)解决:D

如果不可能，请提供更多详细信息