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

Question

next.js アプリケーション上で、react-query を使用したデータのフェッチと更新の基本的な実装があります。私の目標は、突然変異後にデータを更新することです。現在、データはタブが更新された場合にのみ更新されます。しかし、ユーザーの介入がなければそれは変わりません。タブが更新されたときにデータが更新されるのは、refetchOnWindowFocus のデフォルトの動作が原因であることがわかりました。しかし、サーバー側でデータが更新された後、どのようにして無効になるのでしょうか?関連するコードスニペットは次のとおりです。注: 私は、react-querySSR 機能を使用するために Hydration を使用しています。書類_

P粉677684876 · Answer

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

リーリー

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

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

リーリー

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

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

リーリー

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

リーリー

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

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

P粉231079976 · Answer

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