リアクションクエリでの突然変異後の再検証: ステップバイステップガイド

Question

私は、next.js アプリケーションで react-query を使用して、データの取得と更新の基本的な実装を実装しました。 私の目標は、突然変異後にデータを更新することです。 現在、データはタブが更新された場合にのみ更新されます。しかし、ユーザーの介入がなければそれは変わりません。

タブの更新時に発生するデータ更新は、refetchOnWindowFocus のデフォルト動作によるものであることがわかりました。

しかし、サーバー側でデータが更新された後、どのようにして無効になるのでしょうか? 関連するコードスニペットは次のとおりです。

注: react-query SSR 機能を使用するために Hydration を使用しています。書類＃＃＃

_app.jsx

リーリー

ホーム.jsx

リーリー

記事.jsx

リーリー

どんな助けでも大歓迎です

Update: refetchInterval:20002 秒ごとに更新しますが、これにより 2 秒ごとにネットワーク リクエストがトリガーされるため、これが再検証のベスト プラクティスであるかどうかはわかりません。

UPDATE: onSuccess メソッド内のコンソールにミューテーションが表示されています。これは、キーが異なっていても機能するはずなので、ロジックに問題があることを意味します。 queryClient .invalidateQueries() ここではキーを指定しませんでしたが、すべてのクエリをトリガーしました。 しかし、それでも更新されません。なぜ？

Answer 1

ミューテーションを実装する方法では、ミューテーションが成功した後にクエリを再フェッチする必要があります:

リーリー

これが機能しない場合は、突然変異は失敗しています。 onSuccess コールバックが呼び出されているかどうかを確認します。

onSuccess コールバックが呼び出されても、クエリが再フェッチされない場合は、queryKey が一致しないことを意味している可能性があります。テスト目的で、フィルターを次のように拡張してみてください:

リーリー

すべての クエリを再フェッチする必要があります。機能する場合は、queryKey フィルターが一致しないことがわかります。

注意して見てください、あなたは失敗しています:

リーリー

ただし、カスタムフックでは次のように使用しています:

リーリー

つまり、これらは実際には異なっているため、一致していないようです。また、キャッシュ内のクエリとキーをよりよく理解するために、

@tanstack/react-query-devtools を必ず使用してください。

Answer 2

問題は、コンポーネント Article.jsx でレンダリングのたびに新しい QueryClient を作成するため、新しいキャッシュが取得され、更新されないことです。
代わりに、現在のインスタンスを返す useQueryClient フックを使用する必要があります。
const queryClient = useQueryClient();