Merge branch 'alpha' into feature/5054

.github/workflows/ci-v3.yml

@@ -6,7 +6,6 @@ on:
       - 'v3'
 env:
   NX_DAEMON: false
-  NX_VERBOSE_LOGGING: true
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 jobs:
   test:

.github/workflows/ci.yml

@@ -15,7 +15,6 @@ on:
       - 'beta'
 env:
   NX_DAEMON: false
-  NX_VERBOSE_LOGGING: true
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 jobs:
   test-and-publish:
@@ -31,7 +30,7 @@ jobs:
           version: 7
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.19.0
+          node-version: 18.16.0
           registry-url: https://registry.npmjs.org/
           cache: 'pnpm'
       - name: Install dependencies

.github/workflows/pr.yml

@@ -2,12 +2,15 @@ name: pr
 on: [pull_request]
 env:
   NX_DAEMON: false
-  NX_VERBOSE_LOGGING: true
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 jobs:
-  test:
-    name: 'Test'
+  agent:
+    name: 'Nx Cloud Agents'
     runs-on: ubuntu-latest
+    timeout-minutes: 20
+    strategy:
+      matrix:
+        agent: [1, 2, 3, 4]
     steps:
       - uses: actions/checkout@v3
         with:
@@ -19,20 +22,14 @@ jobs:
           version: 7
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.19.0
+          node-version: 18.16.0
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm --filter "./packages/**" --filter query --prefer-offline install
-      - name: Run Tests
-        uses: nick-fields/[email protected]
-        with:
-          command: pnpm test:lib --base=${{ github.event.pull_request.base.sha }}
-          timeout_minutes: 5
-          max_attempts: 3
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v3
-  lint:
-    name: 'Lint'
+      - name: Start Nx Agent ${{ matrix.agent }}
+        run: npx nx-cloud start-agent
+  orchestrator:
+    name: 'Nx Cloud Orchestrator'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -45,30 +42,29 @@ jobs:
           version: 7
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.14.2
+          node-version: 18.16.0
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm --filter "./packages/**" --filter query --prefer-offline install
-      - run: pnpm run test:eslint --base=${{ github.event.pull_request.base.sha }}
-  typecheck:
-    name: 'Typecheck'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-          ref: ${{ github.head_ref }}
-          repository: ${{github.event.pull_request.head.repo.full_name}}
-      - uses: pnpm/[email protected]
-        with:
-          version: 7
-      - uses: actions/setup-node@v3
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        uses: nrwl/nx-set-shas@v2
+      - run: |
+          echo "BASE: ${{ env.NX_BASE }}"
+          echo "HEAD: ${{ env.NX_HEAD }}"
+      - name: Start CI Orchestrator
+        run: npx nx-cloud start-ci-run
+      - name: Run All Checks
+        uses: nick-fields/[email protected]
+        env:
+          BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
         with:
-          node-version: 16.14.2
-          cache: 'pnpm'
-      - name: Install dependencies
-        run: pnpm --filter "./packages/**" --filter query --prefer-offline install
-      - run: pnpm run test:types --base=${{ github.event.pull_request.base.sha }}
+          timeout_minutes: 5
+          max_attempts: 3
+          command: npx nx affected --targets=test:eslint,test:types,test:build,test:lib --base=${{ github.event.pull_request.base.sha }}
+      - name: Stop Agents
+        run: npx nx-cloud stop-all-agents
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v3
   format:
     name: 'Format'
     runs-on: ubuntu-latest
@@ -83,25 +79,8 @@ jobs:
           version: 7
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.14.2
+          node-version: 18.16.0
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm --filter "./packages/**" --filter query --prefer-offline install
       - run: pnpm run test:format --base=${{ github.event.pull_request.base.sha }}
-  test-build:
-    name: 'Test Build'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/[email protected]
-        with:
-          version: 7
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16.14.2
-          cache: 'pnpm'
-      - name: Install dependencies
-        run: pnpm --filter "./packages/**" --filter query --prefer-offline install
-      - run: pnpm run test:build
-        env:
-          BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}

.nvmrc

@@ -1 +1 @@
-v16.19.0
+v18.16.0

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

@@ -108,7 +108,7 @@ If you want to run it against `.js` or `.jsx` files, please use the command belo
 ```
 npx jscodeshift ./path/to/src/ \
   --extensions=js,jsx \
-  --transform=./node_modules/@tanstack/react-query/codemods/v5/remove-overloads/remove-overloads.js
+  --transform=./node_modules/@tanstack/react-query/build/codemods/v5/remove-overloads/remove-overloads.js
 ```
 
 If you want to run it against `.ts` or `.tsx` files, please use the command below:
@@ -117,7 +117,7 @@ If you want to run it against `.ts` or `.tsx` files, please use the command belo
 npx jscodeshift ./path/to/src/ \
   --extensions=ts,tsx \
   --parser=tsx \
-  --transform=./node_modules/@tanstack/react-query/codemods/v5/remove-overloads/remove-overloads.js
+  --transform=./node_modules/@tanstack/react-query/build/codemods/v5/remove-overloads/remove-overloads.js
 ```
 
 Please note in the case of `TypeScript` you need to use `tsx` as the parser; otherwise, the codemod won't be applied properly!
@@ -202,9 +202,9 @@ const queryClient = new QueryClient({
 })
 ```
 
-### The `useErrorBoundary` option has been renamed to `throwErrors`
+### The `useErrorBoundary` option has been renamed to `throwOnError`
 
-To make the `useErrorBoundary` option more framework-agnostic and avoid confusion with the established React function prefix "`use`" for hooks and the "ErrorBoundary" component name, it has been renamed to `throwErrors` to more accurately reflect its functionality.
+To make the `useErrorBoundary` option more framework-agnostic and avoid confusion with the established React function prefix "`use`" for hooks and the "ErrorBoundary" component name, it has been renamed to `throwOnError` to more accurately reflect its functionality.
 
 ### TypeScript: `Error` is now the default type for errors instead of `unknown`
 
@@ -439,16 +439,8 @@ You can adjust the `maxPages` value according to the UX and refetching performan
 
 Note that the infinite list must be bi-directional, which requires both `getNextPageParam` and `getPreviousPageParam` to be defined.
 
-### CreateStore
+### Typesafe way to create Query Options
 
-We are now exposing a way to customize how queries are stored internally. Per default, a `Map` is used but, with the new `createStore` function, you can now use any data structure you want.
-
-```ts
-const queryClient = new QueryClient({
-  queryCache: new QueryCache({
-    createStore: () => new Map()
-  }),
-})
-```
+See the [Typescript Docs](../typescript#typing-query-options) for more details.
 
 [//]: # 'NewFeatures'

docs/react/guides/suspense.md

@@ -41,11 +41,11 @@ useQuery({ queryKey, queryFn, suspense: true })
 
 When using suspense mode, `status` states and `error` objects are not needed and are then replaced by usage of the `React.Suspense` component (including the use of the `fallback` prop and React error boundaries for catching errors). Please read the [Resetting Error Boundaries](#resetting-error-boundaries) and look at the [Suspense Example](https://codesandbox.io/s/github/tannerlinsley/react-query/tree/main/examples/react/suspense) for more information on how to set up suspense mode.
 
-In addition to queries behaving differently in suspense mode, mutations also behave a bit differently. By default, instead of supplying the `error` variable when a mutation fails, it will be thrown during the next render of the component it's used in and propagate to the nearest error boundary, similar to query errors. If you wish to disable this, you can set the `throwErrors` option to `false`. If you wish that errors are not thrown at all, you can set the `throwOnError` option to `false` as well!
+In addition to queries behaving differently in suspense mode, mutations also behave a bit differently. By default, instead of supplying the `error` variable when a mutation fails, it will be thrown during the next render of the component it's used in and propagate to the nearest error boundary, similar to query errors. If you wish to disable this, you can set the `throwOnError` option to `false`. If you wish that errors are not thrown at all, you can set the `throwOnError` option to `false` as well!
 
 ## Resetting Error Boundaries
 
-Whether you are using **suspense** or **throwErrors** in your queries, you will need a way to let queries know that you want to try again when re-rendering after some error occurred.
+Whether you are using **suspense** or **throwOnError** in your queries, you will need a way to let queries know that you want to try again when re-rendering after some error occurred.
 
 Query errors can be reset with the `QueryErrorResetBoundary` component or with the `useQueryErrorResetBoundary` hook.
 

docs/react/plugins/createSyncStoragePersister.md

@@ -128,8 +128,8 @@ import { compress, decompress } from 'lz-string';
 const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: Infinity } } });
 
 persistQueryClient({
-  queryClient: connectionsQueryClient,
-  persistor: createSyncStoragePersister({
+  queryClient: queryClient,
+  persister: createSyncStoragePersister({
     storage: window.localStorage,
     serialize: data => compress(JSON.stringify(data)),
     deserialize: data => JSON.parse(decompress(data)),

docs/react/reference/QueryCache.md

@@ -43,9 +43,6 @@ Its available methods are:
 - `onSettled?:` (data: unknown | undefined, error: unknown | null, query: Query) => void
   - Optional
   - This function will be called if some query is settled (either successful or errored).
-- `createStore?: () => QueryStore`
-  - Optional
-  - This function will be called to create the store that will be used to store the queries. By default, a `Map` is used.
 
 ## Global callbacks
 

docs/react/reference/QueryClient.md

@@ -91,7 +91,7 @@ try {
 
 **Options**
 
-The options for `fetchQuery` are exactly the same as those of [`useQuery`](../reference/useQuery), except the following: `enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, notifyOnChangeProps, onSuccess, onError, onSettled, throwErrors, select, suspense, placeholderData`; which are strictly for useQuery and useInfiniteQuery. You can check the [source code](https://github.com/tannerlinsley/react-query/blob/361935a12cec6f36d0bd6ba12e84136c405047c5/src/core/types.ts#L83) for more clarity.
+The options for `fetchQuery` are exactly the same as those of [`useQuery`](../reference/useQuery), except the following: `enabled, refetchInterval, refetchIntervalInBackground, refetchOnWindowFocus, refetchOnReconnect, refetchOnMount, notifyOnChangeProps, throwOnError, select, suspense, placeholderData`; which are strictly for useQuery and useInfiniteQuery. You can check the [source code](https://github.com/TanStack/query/blob/7cd2d192e6da3df0b08e334ea1cf04cd70478827/packages/query-core/src/types.ts#L119) for more clarity.
 
 **Returns**
 

docs/react/reference/QueryErrorResetBoundary.md

@@ -3,7 +3,7 @@ id: QueryErrorResetBoundary
 title: QueryErrorResetBoundary
 ---
 
-When using **suspense** or **throwErrors** in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occurred. With the `QueryErrorResetBoundary` component you can reset any query errors within the boundaries of the component.
+When using **suspense** or **throwOnError** in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occurred. With the `QueryErrorResetBoundary` component you can reset any query errors within the boundaries of the component.
 
 ```tsx
 import { QueryErrorResetBoundary } from '@tanstack/react-query'

docs/react/reference/useMutation.md

@@ -31,7 +31,7 @@ const {
   onSuccess,
   retry,
   retryDelay,
-  throwErrors,
+  throwOnError,
   meta,
 })
 
@@ -84,8 +84,8 @@ mutate(variables, {
   - This function receives a `retryAttempt` integer and the actual Error and returns the delay to apply before the next attempt in milliseconds.
   - A function like `attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000)` applies exponential backoff.
   - A function like `attempt => attempt * 1000` applies linear backoff.
-- `throwErrors: undefined | boolean | (error: TError) => boolean`
-  - Defaults to the global query config's `throwErrors` value, which is `undefined`
+- `throwOnError: undefined | boolean | (error: TError) => boolean`
+  - Defaults to the global query config's `throwOnError` value, which is `undefined`
   - Set this to `true` if you want mutation errors to be thrown in the render phase and propagate to the nearest error boundary
   - Set this to `false` to disable the behavior of throwing errors to the error boundary.
   - If set to a function, it will be passed the error and should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`)

docs/react/reference/useQuery.md

@@ -23,7 +23,6 @@ const {
   isPlaceholderData,
   isRefetchError,
   isRefetching,
-  isInitialLoading,
   isStale,
   isSuccess,
   refetch,
@@ -39,9 +38,6 @@ const {
   initialDataUpdatedAt,
   meta,
   notifyOnChangeProps,
-  onError,
-  onSettled,
-  onSuccess,
   placeholderData,
   queryKeyHashFn,
   refetchInterval,
@@ -56,7 +52,7 @@ const {
   staleTime,
   structuralSharing,
   suspense,
-  throwErrors,
+  throwOnError,
 })
 ```
 
@@ -101,7 +97,7 @@ const {
 - `queryKeyHashFn: (queryKey: QueryKey) => string`
   - Optional
   - If specified, this function is used to hash the `queryKey` to a string.
-- `refetchInterval: number | false | ((data: TData | undefined, query: Query) => number | false)`
+- `refetchInterval: number | false | ((data: TData | undefined, query: Query) => number | false | undefined)`
   - Optional
   - If set to a number, all queries will continuously refetch at this frequency in milliseconds
   - If set to a function, the function will be executed with the latest data and query to compute a frequency
@@ -135,15 +131,6 @@ const {
   - If set to `['data', 'error']` for example, the component will only re-render when the `data` or `error` properties change.
   - If set to `"all"`, the component will opt-out of smart tracking and re-render whenever a query is updated.
   - By default, access to properties will be tracked, and the component will only re-render when one of the tracked properties change.
-- `onSuccess: (data: TData) => void`
-  - Optional
-  - This function will fire any time the query successfully fetches new data.
-- `onError: (error: TError) => void`
-  - Optional
-  - This function will fire if the query encounters an error and will be passed the error.
-- `onSettled: (data?: TData, error?: TError) => void`
-  - Optional
-  - This function will fire any time the query is either successfully fetched or errors and be passed either the data or error.
 - `select: (data: TData) => unknown`
   - Optional
   - This option can be used to transform or select a part of the data returned by the query function. It affects the returned `data` value, but does not affect what gets stored in the query cache.
@@ -171,8 +158,8 @@ const {
   - Defaults to `true`
   - If set to `false`, structural sharing between query results will be disabled.
   - If set to a function, the old and new data values will be passed through this function, which should combine them into resolved data for the query. This way, you can retain references from the old data to improve performance even when that data contains non-serializable values.
-- `throwErrors: undefined | boolean | (error: TError, query: Query) => boolean`
-  - Defaults to the global query config's `throwErrors` value, which is `undefined`
+- `throwOnError: undefined | boolean | (error: TError, query: Query) => boolean`
+  - Defaults to the global query config's `throwOnError` value, which is `undefined`
   - Set this to `true` if you want errors to be thrown in the render phase and propagate to the nearest error boundary
   - Set this to `false` to disable `suspense`'s default behavior of throwing errors to the error boundary.
   - If set to a function, it will be passed the error and the query, and it should return a boolean indicating whether to show the error in an error boundary (`true`) or return the error as state (`false`)

docs/react/typescript.md

@@ -140,6 +140,25 @@ const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
 
 [//]: # 'Materials'
 
+## Typing Query Options
+
+If you inline query options into `useQuery`, you'll get automatic type inference. However, you might want to extract the query options into a separate function to share them between `useQuery` and e.g. `prefetchQuery`. In that case, you'd lose type inference. To get it back, you can use `queryOptions` helper:
+
+```ts
+import { queryOptions } from '@tanstack/react-query'
+
+function groupOptions() {
+  return queryOptions({
+    queryKey: ['groups'],
+    queryFn: fetchGroups,
+    staleTime: 5 * 1000,
+  })
+}
+
+useQuery(groupOptions())
+queryClient.prefetchQuery(groupOptions())
+```
+
 ## Further Reading
 
 For tips and tricks around type inference, have a look at [React Query and TypeScript](../community/tkdodos-blog#6-react-query-and-typescript) from

docs/solid/overview.md

@@ -225,6 +225,6 @@ function App() {
 ```
 
 - Errors can be caught and reset using SolidJS' native `ErrorBoundary` component.
-  Set `throwErrors` or the `suspense` option to `true` to make sure errors are thrown to the `ErrorBoundary`
+  Set `throwOnError` or the `suspense` option to `true` to make sure errors are thrown to the `ErrorBoundary`
 
 - Since Property tracking is handled through Solid's fine grained reactivity, options like `notifyOnChangeProps` are not needed

nx.json

@@ -7,6 +7,7 @@
           "test:lib",
           "test:eslint",
           "test:types",
+          "test:build",
           "build:types",
           "build",
           "rollup"
@@ -27,7 +28,8 @@
       "{workspaceRoot}/rollup.config.js",
       "{workspaceRoot}/rollup.config.ts",
       "{workspaceRoot}/tsconfig.json",
-      "{workspaceRoot}/tsconfig.base.json"
+      "{workspaceRoot}/tsconfig.base.json",
+      "{workspaceRoot}/package.json"
     ],
     "globalNonBuildAffectingConfig": ["{workspaceRoot}/.eslintrc"],
     "default": [

packages/query-async-storage-persister/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-async-storage-persister",
-  "version": "5.0.0-alpha.21",
+  "version": "5.0.0-alpha.24",
   "description": "A persister for asynchronous storages, to be used with TanStack/Query",
   "author": "tannerlinsley",
   "license": "MIT",