Conditions de course dans React Query

Question

J'essaie de créer une application Todo à l'aide de requêtes réactives, mais je suis confronté à un problème de condition de concurrence. J'ai une page de tâches dans laquelle l'utilisateur met à jour/crée une nouvelle tâche, puis clique sur Enregistrer. Le processus de sauvegarde peut prendre environ 3 secondes en fonction de la connexion Internet de l'utilisateur. Après avoir modifié une tâche, l'utilisateur reste dans la page des tâches. Après avoir créé une nouvelle tâche, l'utilisateur accédera à la page de la tâche.

Le problème est que Lorsque l'utilisateur crée/met à jour une tâche, puis clique sur Afficher la tâche modale (il s'agit d'un composant externe, je ne peux pas le modifier) Le mode affiche la tâche avant de la modifier/vide s'il s'agit d'une nouvelle tâche

Lorsque je débogue le problème, je peux voir que la requête de réaction obtient les éléments de tâche après l'activation du modal. Si je ferme le modal et l'ouvre à nouveau, il affiche les tâches mises à jour.

const {todo} = useTodoQuery()

const openModal = () => modal.open(todo)

retour (
   Ouvrir Todo Preview Modal
)
const useTodoQuery = () =>
  const {data, ...rest} = useQuery(['todo', todoId], async() => {
    si (todoId) {
      retour attendre getTodo (todoId)
    }
    renvoie null ;
  })

  retourner {données, ...reste}
}
const queryClient = new QueryClient({
  Options par défaut : {
    suspense : faux,
    keepPreviousData : vrai,
  }
})
Si je supprime keepPreviousData, la tâche ne sera pas définie. 
const todoMutation = useMutation(
    ['faire'],
    getUpdatedTodo,
    {onSuccess : () => queryClient.invalidateQueries(['todo', todoId])}
  );
J'ai essayé d'utiliser
{onSuccess : (todo) => queryClient.setQueryData(['todo', todoId], todo)}
Mais l’effet n’est pas idéal. 

Answer 1

Attendez simplement le rappel onSuccess et après avoir ouvert le modèle :) Résolu :D

Si ce n'est pas possible, veuillez fournir plus de détails