<p>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. </p> <p>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</p> <p>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. </p> <pre class="brush:php;toolbar:false;">const {todo} = useTodoQuery() const openModal = () => modal.open(todo) retour ( <TodoModalButton onClick={openModal}>Ouvrir Todo Preview Modal</TodoModalButton> )</pré> <pre class="brush:php;toolbar:false;">const useTodoQuery = () => const {data, ...rest} = useQuery(['todo', todoId], async() => { si (todoId) { retour attendre getTodo (todoId) } renvoie null ; }) retourner {données, ...reste} }</pré> <pre class="brush:php;toolbar:false;">const queryClient = new QueryClient({ Options par défaut : { suspense : faux, keepPreviousData : vrai, } })</pré> <p>Si je supprime keepPreviousData, la tâche ne sera pas définie. </p> <pre class="brush:php;toolbar:false;">const todoMutation = useMutation( ['faire'], getUpdatedTodo, {onSuccess : () => queryClient.invalidateQueries(['todo', todoId])} );</pré> <p>J'ai essayé d'utiliser <code>{onSuccess : (todo) => queryClient.setQueryData(['todo', todoId], todo)}</code> Mais l’effet n’est pas idéal. </p>