Merge branch 'main' into feature/angular-query

Author: TkDodo

docs/react/guides/initial-query-data.md

@@ -123,7 +123,7 @@ const result = useQuery({
 
 ### Initial Data from the cache with `initialDataUpdatedAt`
 
-Getting initial data from the cache means the source query you're using to look up the initial data from is likely old, but `initialData`. Instead of using an artificial `staleTime` to keep your query from refetching immediately, it's suggested that you pass the source query's `dataUpdatedAt` to `initialDataUpdatedAt`. This provides the query instance with all the information it needs to determine if and when the query needs to be refetched, regardless of initial data being provided.
+Getting initial data from the cache means the source query you're using to look up the initial data from is likely old. Instead of using an artificial `staleTime` to keep your query from refetching immediately, it's suggested that you pass the source query's `dataUpdatedAt` to `initialDataUpdatedAt`. This provides the query instance with all the information it needs to determine if and when the query needs to be refetched, regardless of initial data being provided.
 
 [//]: # 'Example7'
 

docs/vue/guides/paginated-queries.md

@@ -9,33 +9,33 @@ ref: docs/react/guides/paginated-queries.md
 ```vue
 <script setup lang="ts">
 import { ref, Ref } from 'vue'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, keepPreviousData } from '@tanstack/vue-query'
 
 const fetcher = (page: Ref<number>) =>
   fetch(
     `https://jsonplaceholder.typicode.com/posts?_page=${page.value}&_limit=10`,
   ).then((response) => response.json())
 
 const page = ref(1)
-const { isPending, isError, data, error, isFetching, isPreviousData } =
+const { isPending, isError, data, error, isFetching, isPlaceholderData } =
   useQuery({
     queryKey: ['projects', page],
     queryFn: () => fetcher(page),
-    keepPreviousData: true,
+    placeholderData: keepPreviousData,
   })
 const prevPage = () => {
   page.value = Math.max(page.value - 1, 1)
 }
 const nextPage = () => {
-  if (!isPreviousData.value) {
+  if (!isPlaceholderData.value) {
     page.value = page.value + 1
   }
 }
 </script>
 
 <template>
   <h1>Posts</h1>
-  <p>Current Page: {{ page }} | Previous data: {{ isPreviousData }}</p>
+  <p>Current Page: {{ page }} | Previous data: {{ isPlaceholderData }}</p>
   <button @click="prevPage">Prev Page</button>
   <button @click="nextPage">Next Page</button>
   <div v-if="isPending">Loading...</div>