Merge branch 'alpha' into feature/5054

docs/react/community/lukemorales-query-key-factory.md

@@ -28,9 +28,11 @@ import { createQueryKeyStore } from '@lukemorales/query-key-factory'
 export const queryKeys = createQueryKeyStore({
   users: null,
   todos: {
-    completed: null,
-    search: (query: string, limit = 15) => [query, limit],
-    byId: (todoId: string) => ({ todoId }),
+    detail: (todoId: string) => [todoId],
+    list: (filters: TodoFilters) => ({
+      queryKey: [{ filters }],
+      queryFn: (ctx) => api.getTodos({ filters, page: ctx.pageParam }),
+    }),
   },
 })
 ```
@@ -44,9 +46,11 @@ export const usersKeys = createQueryKeys('users')
 
 // my-api/todos.ts
 export const todosKeys = createQueryKeys('todos', {
-  completed: null,
-  search: (query: string, limit = 15) => [query, limit],
-  byId: (todoId: string) => ({ todoId }),
+  detail: (todoId: string) => [todoId],
+  list: (filters: TodoFilters) => ({
+    queryKey: [{ filters }],
+    queryFn: (ctx) => api.getTodos({ filters, page: ctx.pageParam }),
+  }),
 })
 
 // my-api/index.ts
@@ -60,13 +64,13 @@ import { queryKeys, completeTodo, fetchSingleTodo } from '../my-api'
 export function Todo({ todoId }) {
   const queryClient = useQueryClient()
 
-  const query = useQuery({ queryKey: queryKeys.todos.byId(todoId), queryFn: fetchSingleTodo })
+  const query = useQuery(queryKeys.todos.detail(todoId))
 
   const mutation = useMutation({
-    mutationFn: () => completeTodo,
+    mutationFn: completeTodo,
     onSuccess: () => {
       // Invalidate and refetch
-      queryClient.invalidateQueries({ queryKey: queryKeys.todos.completed })
+      queryClient.invalidateQueries({ queryKey: queryKeys.todos.list.queryKey })
     },
   })
 

docs/react/guides/migrating-to-v5.md

@@ -132,6 +132,10 @@ A few notes about how codemod works:
 - If the codemod cannot infer the usage, then it will leave a message on the console. The message contains the file name and the line number of the usage. In this case, you need to do the migration manually.
 - If the transformation results in an error, you will also see a message on the console. This message will notify you something unexpected happened, please do the migration manually.
 
+### Callbacks on useQuery (and QueryObserver) have been removed
+
+`onSuccess`, `onError` and `onSettled` have been removed from Queries. They haven't been touched for Mutations. Please see [this RFC](https://github.com/TanStack/query/discussions/5279) for motivations behind this change and what to do instead.
+
 ### The `remove` method has been removed from useQuery
 
 Previously, remove method used to remove the query from the queryCache without informing observers about it. It was best used to remove data imperatively that is no longer needed, e.g. when logging a user out.
@@ -327,12 +331,16 @@ useInfiniteQuery({
 
 ### Manual mode for infinite queries has been removed
 
-Previously, we've allowed to overwrite the `pageParams` that would be returned from `getNextPageParam` or `getPreviousPageParam` by passing a `pageParam` value directly to `fetchNextPage` or `fetchPreviousPage`. This feature didn't work at all with refetches and wasn't widely known or used. This also means that `getNextPagParam` is now required for infinite queries.
+Previously, we've allowed to overwrite the `pageParams` that would be returned from `getNextPageParam` or `getPreviousPageParam` by passing a `pageParam` value directly to `fetchNextPage` or `fetchPreviousPage`. This feature didn't work at all with refetches and wasn't widely known or used. This also means that `getNextPageParam` is now required for infinite queries.
 
 [//]: # 'FrameworkBreakingChanges'
 
 ## React Query Breaking Changes
 
+### The minimum required React version is now 18.0
+
+React Query v5 requires React 18.0 or later. This is because we are using the new `useSyncExternalStore` hook, which is only available in React 18.0 and later. Previously, we have been using the shim provided by React.
+
 ### The `contextSharing` prop has been removed from QueryClientProvider
 
 You could previously use the `contextSharing` property to share the first (and at least one) instance of the query client context across the window. This ensured that if TanStack Query was used across different bundles or microfrontends then they will all use the same instance of the context, regardless of module scoping.
@@ -387,6 +395,8 @@ To understand the reasoning behing this change checkout the [v5 roadmap discussi
 
 ## New Features 🚀
 
+v5 also comes with new features:
+
 ### Simplified optimistic updates
 
 We have a new, simplified way to perform optimistic updates by leveraging the returned `variables` from `useMutation`:
@@ -417,7 +427,7 @@ We have a new, simplified way to perform optimistic updates by leveraging the re
   }
 ```
 
-Here, we are only changing how the UI looks when the mutation is running instead of writing data directly to the cache. This works best if we only have one place where we need to show the optimistic update. For more details, have a look at the [optimistic updates documentation](../guides/optimistic-updates.md).
+Here, we are only changing how the UI looks when the mutation is running instead of writing data directly to the cache. This works best if we only have one place where we need to show the optimistic update. For more details, have a look at the [optimistic updates documentation](../guides/optimistic-updates).
 
 ### Limited, Infinite Queries with new maxPages option
 

docs/svelte/ssr.md

@@ -122,11 +122,13 @@ export const load: LayoutLoad = async () => {
 ```ts
 import type { PageLoad } from './$types'
 
-export const load: PageLoad = async ({ parent }) => {
+export const load: PageLoad = async ({ parent, fetch }) => {
   const { queryClient } = await parent()
+
+  // You need to use the SvelteKit fetch function here
   await queryClient.prefetchQuery({
     queryKey: ['posts'],
-    queryFn: getPosts
+    queryFn: async () => (await fetch('/api/posts')).json()
   })
 }
 ```
@@ -140,7 +142,7 @@ export const load: PageLoad = async ({ parent }) => {
   // This data is cached by prefetchQuery in +page.ts so no fetch actually happens here
   const query = createQuery({
     queryKey: ['posts'],
-    queryFn: getPosts
+    queryFn: async () => (await fetch('/api/posts')).json()
   })
 </script>
 ```

examples/svelte/auto-refetching/package.json

@@ -13,8 +13,8 @@
     "@tanstack/svelte-query": "^4.20.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^1.0.0",
-    "@sveltejs/kit": "^1.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.15.0",
     "svelte": "^3.54.0",
     "svelte-check": "^2.9.2",
     "tslib": "^2.4.1",

examples/svelte/auto-refetching/src/app.d.ts

@@ -1,9 +1,12 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
-// and what to do when importing types
-declare namespace App {
-  // interface Locals {}
-  // interface PageData {}
-  // interface Error {}
-  // interface Platform {}
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
 }
+
+export {}

examples/svelte/auto-refetching/src/app.html

@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" type="image/svg+xml" href="%sveltekit.assets%/emblem-light.svg" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width" />
     %sveltekit.head%
   </head>
-  <body>
-    <div>%sveltekit.body%</div>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>

examples/svelte/auto-refetching/vite.config.ts

@@ -1,8 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import type { UserConfig } from 'vite';
+import { defineConfig } from 'vite';
 
-const config: UserConfig = {
+export default defineConfig({
   plugins: [sveltekit()]
-};
-
-export default config;
+});

examples/svelte/basic/package.json

@@ -13,8 +13,8 @@
     "@tanstack/svelte-query": "^4.20.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^1.0.0",
-    "@sveltejs/kit": "^1.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.15.0",
     "svelte": "^3.54.0",
     "svelte-check": "^2.9.2",
     "tslib": "^2.4.1",

examples/svelte/basic/src/app.d.ts

@@ -1,9 +1,12 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
-// and what to do when importing types
-declare namespace App {
-  // interface Locals {}
-  // interface PageData {}
-  // interface Error {}
-  // interface Platform {}
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
 }
+
+export {}

examples/svelte/basic/src/app.html

@@ -2,10 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" type="image/svg+xml" href="%sveltekit.assets%/emblem-light.svg" />    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width" />
     %sveltekit.head%
   </head>
-  <body>
-    <div>%sveltekit.body%</div>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>