リアクティブ クエリを使用して Todo アプリを作成しようとしていますが、競合状態の問題に直面しています。 ユーザーが新しい To Do を更新/作成し、[保存] をクリックする To Do ページがあります。 ユーザーのインターネット接続によっては、保存プロセスに約 3 秒かかる場合があります。 To Do アイテムを編集した後、ユーザーは To Do ページに残ります。 新しい To Do アイテムを作成した後、ユーザーは To Do アイテムのページに移動します。

問題は、 ユーザーが todo を作成/更新し、[todo モーダルの表示] をクリックすると (これは外部コンポーネントなので編集できません) モードでは編集前の To Do が表示されます。新しい To Do の場合は空になります

問題をデバッグすると、モーダルがオンになった後に反応クエリが ToDo アイテムを取得していることがわかります。 モーダルを閉じて再度開くと、更新された To Do 項目が表示されます。

const {todo} = useTodoQuery() const openModal = () => modal.open(todo) 戻る （ Todo プレビュー モーダルを開く )

const useTodoQuery = () => { const {data, ...rest} = useQuery(['todo', todoId], async () => { if (todoId) { return await getTodo(todoId) } null を返します。 }) {データ、...残り}を返す }

const queryClient = new QueryClient({ デフォルトオプション: { サスペンス: 偽、 keepPreviousData: true、 } })

keepPreviousData を削除すると、todo が未定義になります。

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

使ってみた {onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)} しかし、その効果は理想的なものではありません。