docs: SSR/prefetching docs fixes (#6110)

* docs(vue-query): add back old prefetching docs for vue

* docs(react-query): update suspense prefetching example

Author: Ephem

docs/react/guides/prefetching.md

@@ -174,17 +174,29 @@ This starts fetching `'article-comments'` immediately and flattens the waterfall
 1. |> getArticleCommentsById()
 ```
 
-If you want to prefetch together with Suspense, make sure the prefetches still use `useQuery` so you don't suspend and unnecessarily wait for that data, and that those prefetches happen before any suspenseful query so they can start as early as possible.
+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):
 
-You can still use `useSuspenseQuery` in the component that actually needs the data. You _might_ want to wrap this later component in its own `<Suspense>` boundary so the "secondary" query we are prefetching does not block rendering of the "primary" data.
+```tsx
+const usePrefetchQuery = (...args) => {
+  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)
+}
+```
+
+This approach works with both `useQuery` and `useSuspenseQuery`, so feel free to use it as an alternative to the `useQuery({ ..., notifyOnChangeProps: [] })` approach as well. The only tradeoff is that the above function will never fetch and _update_ existing data in the cache if it's stale, but this will usually happen in the later query anyway.
+
+You can now use `useSuspenseQuery` in the component that actually needs the data. You _might_ want to wrap this later component in its own `<Suspense>` boundary so the "secondary" query we are prefetching does not block rendering of the "primary" data.
 
 ```tsx
 // Prefetch
-useQuery({
+usePrefetchQuery({
   queryKey: ['article-comments', id],
   queryFn: getArticleCommentsById,
-  // Optional optimization to avoid rerenders when this query changes:
-  notifyOnChangeProps: [],
 })
 
 const { data: articleResult } = useSuspenseQuery({

docs/vue/guides/prefetching.md

@@ -1,5 +1,47 @@
 ---
 id: prefetching
 title: Prefetching
-ref: docs/react/guides/prefetching.md
 ---
+
+If you're lucky enough, you may know enough about what your users will do to be able to prefetch the data they need before it's needed! If this is the case, you can use the `prefetchQuery` method to prefetch the results of a query to be placed into the cache:
+
+[//]: # 'ExamplePrefetching'
+
+```tsx
+const prefetchTodos = async () => {
+  // The results of this query will be cached like a normal query
+  await queryClient.prefetchQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  })
+}
+```
+
+[//]: # 'ExamplePrefetching'
+
+- If **fresh** data for this query is already in the cache, the data will not be fetched
+- If a `staleTime` is passed eg. `prefetchQuery({ queryKey: ['todos'], queryFn: fn, staleTime: 5000 })` and the data is older than the specified `staleTime`, the query will be fetched
+- If no instances of `useQuery` appear for a prefetched query, it will be deleted and garbage collected after the time specified in `gcTime`.
+
+## Prefetching Infinite Queries
+
+Infinite Queries can be prefetched like regular Queries. Per default, only the first page of the Query will be prefetched and will be stored under the given QueryKey. If you want to prefetch more than one page, you can use the `pages` option, in which case you also have to provide a `getNextPageParam` function:
+
+[//]: # 'ExampleInfiniteQuery'
+
+```tsx
+const prefetchTodos = async () => {
+  // The results of this query will be cached like a normal query
+  await queryClient.prefetchInfiniteQuery({
+    queryKey: ['projects'],
+    queryFn: fetchProjects,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
+    pages: 3, // prefetch the first 3 pages
+  })
+}
+```
+
+[//]: # 'ExampleInfiniteQuery'
+
+The above code will try to prefetch 3 pages in order, and `getNextPageParam` will be executed for each page to determine the next page to prefetch. If `getNextPageParam` returns `undefined`, the prefetching will stop.