React Query の競合状態

Question

リアクティブ クエリを使用して 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)

戻る （
   <TodoModalButton onClick={openModal}>Todo プレビュー モーダルを開く</TodoModalButton>
)

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)} しかし、その効果は理想的なものではありません。

Answer 1

onSuccess コールバックを待ってモデルを開きます:) 解決策: D

不可能な場合は、さらに詳細を入力してください