TanStack · Jun 17, 2024 · Jun 18, 2024 · Jun 19, 2024 · Jun 20, 2024 · Jun 20, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -56,5 +56,7 @@ jobs:
           TAG: ${{ inputs.tag }}
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v4
+        with:
+          directory: packages
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -43,5 +43,7 @@ jobs:
         run: npx nx-cloud stop-all-agents
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v4
+        with:
+          directory: packages
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -36,6 +36,7 @@ stats.html
 .cache
 .idea
 .nx/cache
+.nx/workspace-data
 .pnpm-store
 .svelte-kit
 .tsup

diff --git a/.prettierignore b/.prettierignore
@@ -8,3 +8,6 @@
 pnpm-lock.yaml
 packages/**/tsup.config.bundled*.mjs
 **/tsconfig.vitest-temp.json
+
+# API Extractor report
+packages/angular-query-experimental/etc/*.md
diff --git a/docs/config.json b/docs/config.json
@@ -144,6 +144,10 @@
             {
               "label": "Devtools",
               "to": "framework/angular/devtools"
+            },
+            {
+              "label": "Zoneless",
+              "to": "framework/angular/zoneless"
             }
           ]
         }
@@ -654,6 +658,14 @@
               "label": "infiniteQueryOptions",
               "to": "framework/react/reference/infiniteQueryOptions"
             },
+            {
+              "label": "usePrefetchQuery",
+              "to": "framework/react/reference/usePrefetchQuery"
+            },
+            {
+              "label": "usePrefetchInfiniteQuery",
+              "to": "framework/react/reference/usePrefetchInfiniteQuery"
+            },
             {
               "label": "QueryErrorResetBoundary",
               "to": "framework/react/reference/QueryErrorResetBoundary"

diff --git a/docs/framework/angular/zoneless.md b/docs/framework/angular/zoneless.md
@@ -0,0 +1,11 @@
+---
+id: zoneless
+title: Zoneless Angular
+---
+
+Because the Angular adapter for TanStack Query is built on signals, it fully supports Zoneless!
+
+Among Zoneless benefits are improved performance and debugging experience. For details see the [Angular documentation](https://angular.dev/guide/experimental/zoneless).
+
+> Keep in mind that the API for Angular Zoneless is currently experimental and can change in Angular patch versions.
+> Besides Zoneless, ZoneJS change detection is also fully supported.
diff --git a/docs/framework/react/guides/advanced-ssr.md b/docs/framework/react/guides/advanced-ssr.md
@@ -192,7 +192,10 @@ Next, we'll look at what the Client Component part looks like:
 export default function Posts() {
   // This useQuery could just as well happen in some deeper
   // child to <Posts>, data will be available immediately either way
-  const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })
+  const { data } = useQuery({
+    queryKey: ['posts'],
+    queryFn: () => getPosts(),
+  })
 
   // This query was not prefetched on the server and will not start
   // fetching until on the client, both patterns are fine to mix.
@@ -211,6 +214,8 @@ In the SSR guide, we noted that you could get rid of the boilerplate of having `
 
 > NOTE: If you encounter a type error while using async Server Components with TypeScript versions lower than `5.1.3` and `@types/react` versions lower than `18.2.8`, it is recommended to update to the latest versions of both. Alternatively, you can use the temporary workaround of adding `{/* @ts-expect-error Server Component */}` when calling this component inside another. For more information, see [Async Server Component TypeScript Error](https://nextjs.org/docs/app/building-your-application/configuring/typescript#async-server-component-typescript-error) in the Next.js 13 docs.
 
+> NOTE: If you encounter an error `Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.` make sure that you're **not** passing to queryFn a function reference, instead call the function because queryFn args has a bunch of properties and not all of it would be serializable. see [Server Action only works when queryFn isn't a reference](https://github.com/TanStack/query/issues/6264).
+
 ### Nesting Server Components
 
 A nice thing about Server Components is that they can be nested and exist on many levels in the React tree, making it possible to prefetch data closer to where it's actually used instead of only at the top of the application (just like Remix loaders). This can be as simple as a Server Component rendering another Server Component (we'll leave the Client Components out in this example for brevity):

diff --git a/docs/framework/react/guides/prefetching.md b/docs/framework/react/guides/prefetching.md
@@ -196,45 +196,41 @@ This starts fetching `'article-comments'` immediately and flattens the waterfall
 
 [//]: # 'Suspense'
 
-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
-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.
-  if (!queryClient.getQueryState(options.queryKey)) {
-    queryClient.ensureQueryData(options).catch(() => {
-      // Avoid uncaught error
-    })
-  }
-}
-```
-
-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.
+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. For this scenario, you can use the [`usePrefetchQuery`](../reference/usePrefetchQuery) or the [`usePrefetchInfiniteQuery`](../reference/usePrefetchInfiniteQuery) hooks available in the library.
 
 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
-usePrefetchQuery({
-  queryKey: ['article-comments', id],
-  queryFn: getArticleCommentsById,
-})
+function App() {
+  usePrefetchQuery({
+    queryKey: ['articles'],
+    queryFn: (...args) => {
+      return getArticles(...args)
+    },
+  })
 
-const { data: articleResult } = useSuspenseQuery({
-  queryKey: ['article', id],
-  queryFn: getArticleById,
-})
+  return (
+    <Suspense fallback="Loading articles...">
+      <Articles />
+    </Suspense>
+  )
+}
 
-// In nested component:
-const { data: commentsResult } = useSuspenseQuery({
-  queryKey: ['article-comments', id],
-  queryFn: getArticleCommentsById,
-})
+function Articles() {
+  const { data: articles } = useSuspenseQuery({
+    queryKey: ['articles'],
+    queryFn: (...args) => {
+      return getArticles(...args)
+    },
+  })
+
+  return articles.map((article) => (
+    <div key={articleData.id}>
+      <ArticleHeader article={article} />
+      <ArticleBody article={article} />
+    </div>
+  ))
+}
 ```
 
 Another way is to prefetch inside of the query function. This makes sense if you know that every time an article is fetched it's very likely comments will also be needed. For this, we'll use `queryClient.prefetchQuery`:
@@ -269,6 +265,7 @@ useEffect(() => {
 
 To recap, if you want to prefetch a query during the component lifecycle, there are a few different ways to do it, pick the one that suits your situation best:
 
+- Prefetch before a suspense boundary using `usePrefetchQuery` or `usePrefetchInfiniteQuery` hooks
 - Use `useQuery` or `useSuspenseQueries` and ignore the result
 - Prefetch inside the query function
 - Prefetch in an effect

diff --git a/docs/framework/react/reference/usePrefetchInfiniteQuery.md b/docs/framework/react/reference/usePrefetchInfiniteQuery.md
@@ -0,0 +1,37 @@
+---
+id: usePrefetchInfiniteQuery
+title: usePrefetchInfiniteQuery
+---
+
+```tsx
+const result = usePrefetchInfiniteQuery(options)
+```
+
+**Options**
+
+You can pass everything to `usePrefetchInfiniteQuery` that you can pass to [`queryClient.prefetchInfiniteQuery`](../../../reference/QueryClient#queryclientprefetchinfinitequery). Remember that some of them are required as below:
+
+- `queryKey: QueryKey`
+
+  - **Required**
+  - The query key to prefetch during render
+
+- `queryFn: (context: QueryFunctionContext) => Promise<TData>`
+
+  - **Required, but only if no default query function has been defined** See [Default Query Function](../../guides/default-query-function) for more information.
+
+- `initialPageParam: TPageParam`
+
+  - **Required**
+  - The default page param to use when fetching the first page.
+
+- `getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => TPageParam | undefined | null`
+
+  - **Required**
+  - When new data is received for this query, this function receives both the last page of the infinite list of data and the full array of all pages, as well as pageParam information.
+  - It should return a **single variable** that will be passed as the last optional parameter to your query function.
+  - Return `undefined` or `null` to indicate there is no next page available.
+
+- **Returns**
+
+The `usePrefetchInfiniteQuery` does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses [`useSuspenseInfiniteQuery`](../reference/useSuspenseInfiniteQuery)
diff --git a/docs/framework/react/reference/usePrefetchQuery.md b/docs/framework/react/reference/usePrefetchQuery.md
@@ -0,0 +1,24 @@
+---
+id: usePrefetchQuery
+title: usePrefetchQuery
+---
+
+```tsx
+const result = usePrefetchQuery(options)
+```
+
+**Options**
+
+You can pass everything to `usePrefetchQuery` that you can pass to [`queryClient.prefetchQuery`](../../../reference/QueryClient#queryclientprefetchquery). Remember that some of them are required as below:
+
+- `queryKey: QueryKey`
+
+  - **Required**
+  - The query key to prefetch during render
+
+- `queryFn: (context: QueryFunctionContext) => Promise<TData>`
+  - **Required, but only if no default query function has been defined** See [Default Query Function](../../guides/default-query-function) for more information.
+
+**Returns**
+
+The `usePrefetchQuery` does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses [`useSuspenseQuery`](../reference/useSuspenseQuery).
diff --git a/examples/angular/basic/package.json b/examples/angular/basic/package.json
@@ -14,7 +14,7 @@
     "@angular/core": "^17.3.10",
     "@angular/platform-browser": "^17.3.10",
     "@angular/platform-browser-dynamic": "^17.3.10",
-    "@tanstack/angular-query-experimental": "^5.45.0",
+    "@tanstack/angular-query-experimental": "^5.47.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.6"
@@ -23,7 +23,7 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.10",
-    "@tanstack/angular-query-devtools-experimental": "^5.45.0",
+    "@tanstack/angular-query-devtools-experimental": "^5.47.0",
     "typescript": "5.3.3"
   }
 }
diff --git a/examples/angular/infinite-query-with-max-pages/package.json b/examples/angular/infinite-query-with-max-pages/package.json
@@ -14,7 +14,7 @@
     "@angular/core": "^17.3.10",
     "@angular/platform-browser": "^17.3.10",
     "@angular/platform-browser-dynamic": "^17.3.10",
-    "@tanstack/angular-query-experimental": "^5.45.0",
+    "@tanstack/angular-query-experimental": "^5.47.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.6"
@@ -23,7 +23,7 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.10",
-    "@tanstack/angular-query-devtools-experimental": "^5.45.0",
+    "@tanstack/angular-query-devtools-experimental": "^5.47.0",
     "typescript": "5.3.3"
   }
 }
diff --git a/examples/angular/router/package.json b/examples/angular/router/package.json
@@ -15,7 +15,7 @@
     "@angular/platform-browser": "^17.3.10",
     "@angular/platform-browser-dynamic": "^17.3.10",
     "@angular/router": "^17.3.10",
-    "@tanstack/angular-query-experimental": "^5.45.0",
+    "@tanstack/angular-query-experimental": "^5.47.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.6"
@@ -24,7 +24,7 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.10",
-    "@tanstack/angular-query-devtools-experimental": "^5.45.0",
+    "@tanstack/angular-query-devtools-experimental": "^5.47.0",
     "typescript": "5.3.3"
   }
 }
diff --git a/examples/angular/simple/package.json b/examples/angular/simple/package.json
@@ -15,7 +15,7 @@
     "@angular/platform-browser": "^17.3.10",
     "@angular/platform-browser-dynamic": "^17.3.10",
     "@angular/router": "^17.3.10",
-    "@tanstack/angular-query-experimental": "^5.45.0",
+    "@tanstack/angular-query-experimental": "^5.47.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "^0.14.6"
@@ -24,7 +24,7 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.10",
-    "@tanstack/angular-query-devtools-experimental": "^5.45.0",
+    "@tanstack/angular-query-devtools-experimental": "^5.47.0",
     "typescript": "5.3.3"
   }
 }
diff --git a/examples/react/algolia/package.json b/examples/react/algolia/package.json
@@ -11,14 +11,14 @@
   "dependencies": {
     "@algolia/client-search": "4.23.3",
     "@algolia/transporter": "4.23.3",
-    "@tanstack/react-query": "^5.45.1",
-    "@tanstack/react-query-devtools": "^5.45.1",
+    "@tanstack/react-query": "^5.47.0",
+    "@tanstack/react-query-devtools": "^5.47.0",
     "algoliasearch": "4.23.3",
     "react": "19.0.0-rc-4c2e457c7c-20240522",
     "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
-    "@tanstack/eslint-plugin-query": "^5.43.1",
+    "@tanstack/eslint-plugin-query": "^5.47.0",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-react": "^4.2.1",

diff --git a/examples/react/algolia/tsconfig.json b/examples/react/algolia/tsconfig.json
@@ -7,7 +7,7 @@
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,

diff --git a/examples/react/auto-refetching/package.json b/examples/react/auto-refetching/package.json
@@ -7,8 +7,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.45.1",
-    "@tanstack/react-query-devtools": "^5.45.1",
+    "@tanstack/react-query": "^5.47.0",
+    "@tanstack/react-query-devtools": "^5.47.0",
     "axios": "^1.6.8",
     "isomorphic-unfetch": "4.0.2",
     "next": "^14.0.0",

diff --git a/examples/react/basic-graphql-request/package.json b/examples/react/basic-graphql-request/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.45.1",
-    "@tanstack/react-query-devtools": "^5.45.1",
+    "@tanstack/react-query": "^5.47.0",
+    "@tanstack/react-query-devtools": "^5.47.0",
     "graphql": "^16.8.1",
     "graphql-request": "^7.0.1",
     "react": "19.0.0-rc-4c2e457c7c-20240522",

diff --git a/examples/react/basic-typescript/package.json b/examples/react/basic-typescript/package.json
@@ -9,20 +9,20 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/query-sync-storage-persister": "^5.45.0",
-    "@tanstack/react-query": "^5.45.1",
-    "@tanstack/react-query-devtools": "^5.45.1",
-    "@tanstack/react-query-persist-client": "^5.45.1",
+    "@tanstack/query-sync-storage-persister": "^5.47.0",
+    "@tanstack/react-query": "^5.47.0",
+    "@tanstack/react-query-devtools": "^5.47.0",
+    "@tanstack/react-query-persist-client": "^5.47.0",
     "axios": "^1.6.8",
     "react": "19.0.0-rc-4c2e457c7c-20240522",
     "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
-    "@tanstack/eslint-plugin-query": "^5.43.1",
+    "@tanstack/eslint-plugin-query": "^5.47.0",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "typescript": "5.3.3",
     "vite": "^5.2.11"

diff --git a/examples/react/basic-typescript/tsconfig.json b/examples/react/basic-typescript/tsconfig.json
@@ -7,7 +7,7 @@
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,