diff --git a/docs/framework/react/guides/prefetching.md b/docs/framework/react/guides/prefetching.md index b60e8cb344..719335eff0 100644 --- a/docs/framework/react/guides/prefetching.md +++ b/docs/framework/react/guides/prefetching.md @@ -199,14 +199,18 @@ This starts fetching `'article-comments'` immediately and flattens the waterfall If you want to prefetch together with Suspense, you will have to do things a bit differently. You can't use `useSuspenseQueries` to prefetch, since the prefetch would block the component from rendering. You also can not use `useQuery` for the prefetch, because that wouldn't start the prefetch until after suspenseful query had resolved. What you can do is add a small `usePrefetchQuery` function (we might add this to the library itself at a later point): ```tsx -const usePrefetchQuery = (...args) => { - const queryClient = useQueryClient() +function usePrefetchQuery(options) { + const queryClient = useQueryClient(); // This happens in render, but is safe to do because ensureQueryData // only fetches if there is no data in the cache for this query. This // means we know no observers are watching the data so the side effect // is not observable, which is safe. - queryClient.ensureQueryData(...args) + if (!queryClient.getQueryState(options.queryKey)) { + queryClient.ensureQueryData(options).catch(() => { + // Avoid uncaught error + }); + } } ```