Merge branch 'alpha' into feature/queryOptions

.github/workflows/pr.yml

@@ -1,7 +1,9 @@
 name: pr
 on: [pull_request]
 env:
-  NX_DAEMON: 'false'
+  NX_DAEMON: false
+  NX_VERBOSE_LOGGING: true
+  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 jobs:
   test:
     name: 'Test'

.gitignore

@@ -43,3 +43,5 @@ node_modules
 .cache
 dist
 .idea
+
+nx-cloud.env

docs/react/guides/paginated-queries.md

@@ -24,7 +24,7 @@ This experience is not optimal and unfortunately is how many tools today insist
 
 Consider the following example where we would ideally want to increment a pageIndex (or cursor) for a query. If we were to use `useQuery`, **it would still technically work fine**, but the UI would jump in and out of the `success` and `pending` states as different queries are created and destroyed for each page or cursor. By setting `placeholderData` to `(previousData) => previousData` or `keepPreviousData` function exported from TanStack Query, we get a few new things:
 
-- **The data from the last successful fetch available while new data is being requested, even though the query key has changed**.
+- **The data from the last successful fetch is available while new data is being requested, even though the query key has changed**.
 - When the new data arrives, the previous `data` is seamlessly swapped to show the new data.
 - `isPlaceholderData` is made available to know what data the query is currently providing you
 

docs/react/reference/useQueries.md

@@ -25,4 +25,4 @@ The `useQueries` hook accepts an options object with a **queries** key whose val
 
 **Returns**
 
-The `useQueries` hook returns an array with all the query results.
+The `useQueries` hook returns an array with all the query results. The order returned is the same as the input order.

nx.json

@@ -1,17 +1,17 @@
 {
   "tasksRunnerOptions": {
     "default": {
-      "runner": "nx/tasks-runners/default",
+      "runner": "@nrwl/nx-cloud",
       "options": {
         "cacheableOperations": [
           "test:lib",
           "test:eslint",
           "test:types",
           "build:types",
-          "test:format",
-          "test:build",
-          "build"
-        ]
+          "build",
+          "rollup"
+        ],
+        "accessToken": "ZDdkNDA4MGEtYjNmYi00MWI4LWE1N2QtYTdlNmYxMGJlZWM2fHJlYWQ="
       }
     }
   },
@@ -52,12 +52,18 @@
       "inputs": ["default", "^public"]
     },
     "test:types": {
-      "outputs": ["{projectRoot}/build"],
+      "outputs": [
+        "{projectRoot}/build/**/*.d.ts",
+        "{projectRoot}/build/.tsbuildinfo"
+      ],
       "inputs": ["default", "^public"],
       "dependsOn": ["^test:types"]
     },
     "build:types": {
-      "outputs": ["{projectRoot}/build"],
+      "outputs": [
+        "{projectRoot}/build/**/*.d.ts",
+        "{projectRoot}/build/.tsbuildinfo"
+      ],
       "inputs": ["default", "^public"],
       "dependsOn": ["^build:types"]
     },

package.json

@@ -8,12 +8,12 @@
     "test": "pnpm run test:ci",
     "test:ci": "nx run-many --targets=test:lib,test:types,test:eslint,test:format --parallel=5",
     "test:eslint": "nx run-many --target=test:eslint --parallel=5",
-    "test:format": "nx test:format root",
+    "test:format": "pnpm run prettier --check",
     "test:lib": "nx run-many --target=test:lib --parallel=5",
     "test:lib:dev": "pnpm --filter \"./packages/**\" run test:lib:dev",
-    "test:build": "nx test:build root",
+    "test:build": "nx run-many --target=test:build --projects=root",
     "test:types": "nx run-many --target=test:types --parallel=5",
-    "build": "nx build root",
+    "build": "nx run-many --target=build --projects=root",
     "build:types": "nx run-many --target=build:types --parallel=5",
     "watch": "concurrently --kill-others \"rollup --config rollup.config.js -w\" \"pnpm run build:types --watch\"",
     "dev": "pnpm run watch",
@@ -36,6 +36,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@commitlint/parse": "^17.4.2",
     "@faker-js/faker": "^7.6.0",
+    "@nrwl/nx-cloud": "^15.3.1",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
@@ -87,6 +88,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^4.1.2",
     "rollup": "^3.15.0",
+    "rollup-plugin-preserve-directives": "0.1.0",
     "rollup-plugin-size": "^0.2.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.9.0",
@@ -106,5 +108,10 @@
         "path": "packages/*/build/umd/*.production.js"
       }
     ]
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@types/testing-library__jest-dom@5.14.5": "patches/@types__testing-library__jest-dom@5.14.5.patch"
+    }
   }
 }

packages/eslint-plugin-query/tsconfig.json

@@ -4,7 +4,8 @@
     "composite": true,
     "rootDir": "./src",
     "outDir": "./build/lib",
-    "tsBuildInfoFile": "./build/.tsbuildinfo"
+    "tsBuildInfoFile": "./build/.tsbuildinfo",
+    "types": ["vitest/globals"]
   },
   "include": ["src"]
 }

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

@@ -4,10 +4,9 @@
     "composite": true,
     "rootDir": "./src",
     "outDir": "./build/lib",
-    "tsBuildInfoFile": "./build/.tsbuildinfo"
+    "tsBuildInfoFile": "./build/.tsbuildinfo",
+    "types": ["vitest/globals"]
   },
   "include": ["src"],
-  "references": [
-    { "path": "../query-persist-client-core" }
-  ]
+  "references": [{ "path": "../query-persist-client-core" }]
 }

packages/query-core/tsconfig.json

@@ -4,7 +4,8 @@
     "composite": true,
     "rootDir": "./src",
     "outDir": "./build/lib",
-    "tsBuildInfoFile": "./build/.tsbuildinfo"
+    "tsBuildInfoFile": "./build/.tsbuildinfo",
+    "types": ["vitest/globals"]
   },
   "include": ["src"]
 }

packages/query-persist-client-core/tsconfig.json

@@ -4,10 +4,9 @@
     "composite": true,
     "rootDir": "./src",
     "outDir": "./build/lib",
-    "tsBuildInfoFile": "./build/.tsbuildinfo"
+    "tsBuildInfoFile": "./build/.tsbuildinfo",
+    "types": ["vitest/globals"]
   },
   "include": ["src"],
-  "references": [
-    { "path": "../query-core" }
-  ]
+  "references": [{ "path": "../query-core" }]
 }

packages/query-sync-storage-persister/tsconfig.json

@@ -4,10 +4,9 @@
     "composite": true,
     "rootDir": "./src",
     "outDir": "./build/lib",
-    "tsBuildInfoFile": "./build/.tsbuildinfo"
+    "tsBuildInfoFile": "./build/.tsbuildinfo",
+    "types": ["vitest/globals"]
   },
   "include": ["src"],
-  "references": [
-    { "path": "../query-persist-client-core" }
-  ]
+  "references": [{ "path": "../query-persist-client-core" }]
 }

packages/react-query-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.11",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",

packages/react-query-devtools/src/__tests__/devtools.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { fireEvent, screen, waitFor, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, onlineManager } from '@tanstack/react-query'
 import { defaultPanelSize, sortFns } from '../utils'
 import {
   getByTextContent,
@@ -478,6 +478,31 @@ describe('ReactQueryDevtools', () => {
     expect(count).toBe(2)
   })
 
+  it('should inform onlineManager when offline mode is simulated', () => {
+    const { queryClient } = createQueryClient()
+    const online: Array<boolean> = []
+
+    const unsubscribe = onlineManager.subscribe(() => {
+      online.push(onlineManager.isOnline())
+    })
+
+    renderWithClient(queryClient, <div />, {
+      initialIsOpen: true,
+    })
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /mock offline behavior/i }),
+    )
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /restore offline mock/i }),
+    )
+
+    expect(online).toStrictEqual([false, true])
+
+    unsubscribe()
+  })
+
   it('should sort the queries according to the sorting filter', async () => {
     const { queryClient, queryCache } = createQueryClient()
 

packages/react-query-devtools/src/devtools.tsx

@@ -689,6 +689,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                       } else {
                         onlineManager.setOnline(false)
                         setMockOffline(true)
+                        window.dispatchEvent(new Event('offline'))
                       }
                     }}
                     aria-label={

packages/react-query-devtools/tsconfig.json

@@ -4,7 +4,8 @@
     "composite": true,
     "rootDir": "./src",
     "outDir": "./build/lib",
-    "tsBuildInfoFile": "./build/.tsbuildinfo"
+    "tsBuildInfoFile": "./build/.tsbuildinfo",
+    "types": ["vitest/globals"]
   },
   "include": ["src"],
   "references": [

packages/react-query-persist-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-persist-client",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.10",
   "description": "React bindings to work with persisters in TanStack/react-query",
   "author": "tannerlinsley",
   "license": "MIT",

packages/react-query-persist-client/tsconfig.json

@@ -4,7 +4,8 @@
     "composite": true,
     "rootDir": "./src",
     "outDir": "./build/lib",
-    "tsBuildInfoFile": "./build/.tsbuildinfo"
+    "tsBuildInfoFile": "./build/.tsbuildinfo",
+    "types": ["vitest/globals"]
   },
   "include": ["src"],
   "references": [

packages/react-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.10",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",

packages/react-query/src/__tests__/useMutationState.test.tsx

@@ -4,10 +4,12 @@ import { useIsMutating, useMutationState } from '../useMutationState'
 import { useMutation } from '../useMutation'
 import {
   createQueryClient,
+  doNotExecute,
   renderWithClient,
   setActTimeout,
   sleep,
 } from './utils'
+import type { MutationState, MutationStatus } from '@tanstack/query-core'
 
 describe('useIsMutating', () => {
   it('should return the number of fetching mutations', async () => {
@@ -172,6 +174,27 @@ describe('useIsMutating', () => {
 })
 
 describe('useMutationState', () => {
+  describe('types', () => {
+    it('should default to QueryState', () => {
+      doNotExecute(() => {
+        const result = useMutationState({
+          filters: { status: 'pending' },
+        })
+
+        expectTypeOf(result).toEqualTypeOf<Array<MutationState>>()
+      })
+    })
+    it('should infer with select', () => {
+      doNotExecute(() => {
+        const result = useMutationState({
+          filters: { status: 'pending' },
+          select: (mutation) => mutation.state.status,
+        })
+
+        expectTypeOf(result).toEqualTypeOf<Array<MutationStatus>>()
+      })
+    })
+  })
   it('should return variables after calling mutate', async () => {
     const queryClient = createQueryClient()
     const variables: unknown[][] = []

packages/react-query/src/errorBoundaryUtils.ts

@@ -1,3 +1,4 @@
+'use client'
 import type {
   DefaultedQueryObserverOptions,
   Query,

packages/react-query/src/useBaseQuery.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 
 import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'

packages/react-query/src/useInfiniteQuery.ts

@@ -1,3 +1,4 @@
+'use client'
 import type {
   QueryObserver,
   QueryKey,

packages/react-query/src/useIsFetching.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 import type { QueryClient, QueryFilters } from '@tanstack/query-core'
 import { notifyManager } from '@tanstack/query-core'

packages/react-query/src/useMutation.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 import type { QueryClient, DefaultError } from '@tanstack/query-core'
 import { notifyManager, MutationObserver } from '@tanstack/query-core'

packages/react-query/src/useMutationState.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 
 import type {
@@ -6,10 +7,10 @@ import type {
   Mutation,
   MutationCache,
   DefaultError,
+  MutationState,
 } from '@tanstack/query-core'
 import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'
 import { useQueryClient } from './QueryClientProvider'
-import type { MutationState } from '@tanstack/query-core/build/lib/mutation'
 
 export function useIsMutating(
   filters?: MutationFilters,
@@ -22,7 +23,7 @@ export function useIsMutating(
   ).length
 }
 
-type MutationStateOptions<TResult> = {
+type MutationStateOptions<TResult = MutationState> = {
   filters?: MutationFilters
   select?: (
     mutation: Mutation<unknown, DefaultError, unknown, unknown>,
@@ -45,7 +46,7 @@ function getResult<TResult = MutationState>(
     )
 }
 
-export function useMutationState<TResult = unknown>(
+export function useMutationState<TResult = MutationState>(
   options: MutationStateOptions<TResult> = {},
   queryClient?: QueryClient,
 ): Array<TResult> {

packages/react-query/src/useQueries.ts

@@ -1,3 +1,4 @@
+'use client'
 import * as React from 'react'
 
 import type {

packages/react-query/src/useQuery.ts

@@ -1,3 +1,4 @@
+'use client'
 import type { QueryClient, QueryKey, DefaultError } from '@tanstack/query-core'
 import { QueryObserver } from '@tanstack/query-core'
 import type {

packages/react-query/tsconfig.json

@@ -4,10 +4,9 @@
     "composite": true,
     "rootDir": "./src",
     "outDir": "./build/lib",
-    "tsBuildInfoFile": "./build/.tsbuildinfo"
+    "tsBuildInfoFile": "./build/.tsbuildinfo",
+    "types": ["vitest/globals"]
   },
   "include": ["src"],
-  "references": [
-    { "path": "../query-core" }
-  ]
+  "references": [{ "path": "../query-core" }]
 }