私はreact-queryを試していますが、それがキャッシュされるのを見たいと思っています。書籍のリストを取得するページがあります。
重要な部分を表示しようとするだけで、簡潔にするために一部のコードが明らかに省略されていることに注意してください。
const useBooks = options => {
return useQuery(['books', options], bookApi.fetchBooks(options));
}
const Books = () => {
useEffect(() => () => console.log("unmount"), []);
const [options, setOptions] = useState({}); // options ex: { page: 1, search: "test"}
const {error, isLoading, data} = useBooks(options);
return books.map(book => <div>{book.name}</div>;
}
これで、この本は、react-router-domを使用した私のアプリの「ページ」になりました。
const App = () => {
return (
<Router>
<>
<Route exact path="/">
<Home />
</Route>
<Route path="/books">
<Books />
</Route>
</>
</Router>
)
}
「ホーム」と「本」の間を行ったり来たりすると（アプリのナビゲーションリンクをクリックして）、本のフェッチが毎回ネットワークにヒットするのがわかります。コンソールに「アンマウント」も表示されます。
私はもともとルートをスイッチでラップしていて、これを削除しましたが、Booksコンポーネントはまだマウント解除されているようです。マウントが解除されず、ネットワークフェッチが表示されず、ブックがreact-queryキャッシュからプルされることを期待しています。また、useBooksフックで検索オプションパラメータを使用しないようにしてみましたが、結果は同じでした。
シナリオでネットワークフェッチを回避するにはどうすればよいですか？
react-routerコンポーネントから離れると、コンポーネントがアンマウントされます。しかし、それは意図的なものであり、問題ではありません。
react-queryフックを使用するコンポーネントがマウントされると、フェッチがトリガーされます（マウントのため）。ただし、この特定のキーのデータがすでにキャッシュにある場合は、そのデータが「古いデータ」として即座に返され、フェッチはバックグラウンドでのみ実行されます。
リクエストの送信を回避したい場合は、次のいずれかを実行できます。
refetchOnmountしfalseますstaleTimeクエリにを設定しますを設定することをお勧めしますstaleTime：データが「新鮮」と見なされる期間をreact-queryに通知します。5分に設定すると、5分間バックグラウンドでの再フェッチは行われません。データは常にキャッシュから直接取得されます。staleTimeデフォルトは0、であるため、常にバックグラウンドで再フェッチされます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加