feat: initial v3 changes

Author: boschni

docs/src/pages/docs/api.md

@@ -52,7 +52,7 @@ const {
 const queryInfo = useQuery({
   queryKey,
   queryFn,
-  config,
+  enabled,
 })
 ```
 
@@ -124,6 +124,9 @@ const queryInfo = useQuery({
 - `onSettled: Function(data, error) => data`
   - 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) => data`
+  - Optional
+  - This option can be used to transform or select a part of the data returned by the query function.
 - `suspense: Boolean`
   - Optional
   - Set this to `true` to enable suspense mode.
@@ -186,7 +189,7 @@ const queryInfo = useQuery({
   - The failure count for the query.
   - Incremented every time the query fails.
   - Reset to `0` when the query succeeds.
-- `refetch: Function({ throwOnError }) => Promise<TResult | undefined>`
+- `refetch: Function({ throwOnError }) => Promise<TData | undefined>`
   - A function to manually refetch the query.
   - If the query errors, the error will only be logged. If you want an error to be thrown, pass the `throwOnError: true` option
 - `remove: Function() => void`
@@ -253,7 +256,7 @@ The returned properties for `useInfiniteQuery` are identical to the [`useQuery`
 
 - `isFetchingMore: false | 'next' | 'previous'`
   - If using `paginated` mode, this will be `true` when fetching more results using the `fetchMore` function.
-- `fetchMore: Function(fetchMoreVariableOverride) => Promise<TResult | undefined>`
+- `fetchMore: Function(fetchMoreVariableOverride) => Promise<TData | undefined>`
   - This function allows you to fetch the next "page" of results.
   - `fetchMoreVariableOverride` allows you to optionally override the fetch more variable returned from your `getFetchMore` option to your query function to retrieve the next page of results.
 - `canFetchMore: Boolean`
@@ -391,7 +394,7 @@ try {
 
 **Returns**
 
-- `Promise<TResult>`
+- `Promise<TData>`
 
 ## `queryCache.prefetchQuery`
 
@@ -436,7 +439,7 @@ The options for `prefetchQuery` are exactly the same as those of [`useQuery`](#u
 
 **Returns**
 
-- `Promise<TResult | undefined>`
+- `Promise<TData | undefined>`
   - A promise is returned that will either immediately resolve with the query's cached response data, or resolve to the data returned by the fetch function. It **will not** throw an error if the fetch fails. This can be configured by setting the `throwOnError` option to `true`.
 
 ## `queryCache.getQueryData`
@@ -837,16 +840,16 @@ function App() {
 - `queryCache: QueryCache`
   - Instance of QueryCache.
 
-## `ReactQueryErrorResetBoundary`
+## `QueryErrorResetBoundary`
 
-When using **suspense** or **useErrorBoundaries** in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occured. With the `ReactQueryErrorResetBoundary` component you can reset any query errors within the boundaries of the component.
+When using **suspense** or **useErrorBoundaries** in your queries, you need a way to let queries know that you want to try again when re-rendering after some error occured. With the `QueryErrorResetBoundary` component you can reset any query errors within the boundaries of the component.
 
 ```js
-import { ReactQueryErrorResetBoundary } from 'react-query'
+import { QueryErrorResetBoundary } from 'react-query'
 import { ErrorBoundary } from 'react-error-boundary'
 
 const App: React.FC = () => (
-  <ReactQueryErrorResetBoundary>
+  <QueryErrorResetBoundary>
     {({ reset }) => (
       <ErrorBoundary
         onReset={reset}
@@ -860,13 +863,13 @@ const App: React.FC = () => (
         <Page />
       </ErrorBoundary>
     )}
-  </ReactQueryErrorResetBoundary>
+  </QueryErrorResetBoundary>
 )
 ```
 
 ## `useErrorResetBoundary`
 
-This hook will reset any query errors within the closest `ReactQueryErrorResetBoundary`. If there is no boundary defined it will reset them globally:
+This hook will reset any query errors within the closest `QueryErrorResetBoundary`. If there is no boundary defined it will reset them globally:
 
 ```js
 import { useErrorResetBoundary } from 'react-query'

docs/src/pages/docs/guides/suspense.md

@@ -47,16 +47,16 @@ In addition to queries behaving differently in suspense mode, mutations also beh
 
 Whether you are using **suspense** or **useErrorBoundaries** in your queries, you will need a way to let queries know that you want to try again when re-rendering after some error occured.
 
-Query errors can be reset with the `ReactQueryErrorResetBoundary` component or with the `useErrorResetBoundary` hook.
+Query errors can be reset with the `QueryErrorResetBoundary` component or with the `useErrorResetBoundary` hook.
 
 When using the component it will reset any query errors within the boundaries of the component:
 
 ```js
-import { ReactQueryErrorResetBoundary } from 'react-query'
+import { QueryErrorResetBoundary } from 'react-query'
 import { ErrorBoundary } from 'react-error-boundary'
 
 const App: React.FC = () => (
-  <ReactQueryErrorResetBoundary>
+  <QueryErrorResetBoundary>
     {({ reset }) => (
       <ErrorBoundary
         onReset={reset}
@@ -70,11 +70,11 @@ const App: React.FC = () => (
         <Page />
       </ErrorBoundary>
     )}
-  </ReactQueryErrorResetBoundary>
+  </QueryErrorResetBoundary>
 )
 ```
 
-When using the hook it will reset any query errors within the closest `ReactQueryErrorResetBoundary`. If there is no boundary defined it will reset them globally:
+When using the hook it will reset any query errors within the closest `QueryErrorResetBoundary`. If there is no boundary defined it will reset them globally:
 
 ```js
 import { useErrorResetBoundary } from 'react-query'

jest.config.js

@@ -4,6 +4,6 @@ module.exports = {
   testMatch: ['<rootDir>/src/**/*.test.tsx'],
   testPathIgnorePatterns: ['<rootDir>/types/'],
   moduleNameMapper: {
-    'react-query': '<rootDir>/src/react/index.ts',
+    'react-query': '<rootDir>/src/index.ts',
   },
 }

rollup.config.js

@@ -27,37 +27,6 @@ const babelConfig = { extensions, runtimeHelpers: true }
 const resolveConfig = { extensions }
 
 export default [
-  {
-    input: inputSrc,
-    output: {
-      file: 'dist/react-query.mjs',
-      format: 'es',
-      sourcemap: true,
-    },
-    external,
-    plugins: [
-      resolve(resolveConfig),
-      babel(babelConfig),
-      commonJS(),
-      externalDeps(),
-    ],
-  },
-  {
-    input: inputSrc,
-    output: {
-      file: 'dist/react-query.min.mjs',
-      format: 'es',
-      sourcemap: true,
-    },
-    external,
-    plugins: [
-      resolve(resolveConfig),
-      babel(babelConfig),
-      commonJS(),
-      externalDeps(),
-      terser(),
-    ],
-  },
   {
     input: inputSrc,
     output: {
@@ -99,37 +68,6 @@ export default [
       }),
     ],
   },
-  {
-    input: hydrationSrc,
-    output: {
-      file: 'dist/hydration/react-query-hydration.mjs',
-      format: 'es',
-      sourcemap: true,
-    },
-    external: hydrationExternal,
-    plugins: [
-      resolve(resolveConfig),
-      babel(babelConfig),
-      commonJS(),
-      externalDeps(),
-    ],
-  },
-  {
-    input: hydrationSrc,
-    output: {
-      file: 'dist/hydration/react-query-hydration.min.mjs',
-      format: 'es',
-      sourcemap: true,
-    },
-    external: hydrationExternal,
-    plugins: [
-      resolve(resolveConfig),
-      babel(babelConfig),
-      commonJS(),
-      externalDeps(),
-      terser(),
-    ],
-  },
   {
     input: hydrationSrc,
     output: {

src/core/config.ts

@@ -1,147 +1,42 @@
-import { stableStringify } from './utils'
-import type {
-  ArrayQueryKey,
-  MutationConfig,
-  QueryConfig,
-  QueryKey,
-  QueryKeySerializerFunction,
-  ReactQueryConfig,
-  ResolvedQueryConfig,
-} from './types'
-import type { QueryCache } from './queryCache'
-
-// TYPES
-
-export interface ReactQueryConfigRef {
-  current: ReactQueryConfig
-}
+import type { DefaultOptions } from './types'
+import { defaultQueryKeySerializerFn } from './utils'
 
 // CONFIG
 
-export const defaultQueryKeySerializerFn: QueryKeySerializerFunction = (
-  queryKey: QueryKey
-): [string, ArrayQueryKey] => {
-  try {
-    let arrayQueryKey: ArrayQueryKey = Array.isArray(queryKey)
-      ? queryKey
-      : [queryKey]
-    const queryHash = stableStringify(arrayQueryKey)
-    arrayQueryKey = JSON.parse(queryHash)
-    return [queryHash, arrayQueryKey]
-  } catch {
-    throw new Error('A valid query key is required!')
-  }
-}
-
-/**
- * Config merging strategy
- *
- * When using hooks the config will be merged in the following order:
- *
- * 1. These defaults.
- * 2. Defaults from the hook query cache.
- * 3. Combined defaults from any config providers in the tree.
- * 4. Query/mutation config provided to the hook.
- *
- * When using a query cache directly the config will be merged in the following order:
- *
- * 1. These defaults.
- * 2. Defaults from the query cache.
- * 3. Query/mutation config provided to the query cache method.
- */
-export const DEFAULT_CONFIG: ReactQueryConfig = {
+export const DEFAULT_OPTIONS = {
   queries: {
     cacheTime: 5 * 60 * 1000,
     enabled: true,
     notifyOnStatusChange: true,
-    queryFn: () => Promise.reject(),
     queryKeySerializerFn: defaultQueryKeySerializerFn,
     refetchOnMount: true,
     refetchOnReconnect: true,
     refetchOnWindowFocus: true,
     retry: 3,
-    retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
+    retryDelay: (attempt: number) => Math.min(1000 * 2 ** attempt, 30000),
     staleTime: 0,
     structuralSharing: true,
   },
 }
 
-export function getDefaultReactQueryConfig() {
-  return {
-    queries: { ...DEFAULT_CONFIG.queries },
-    mutations: { ...DEFAULT_CONFIG.mutations },
-  }
-}
-
-export function mergeReactQueryConfigs(
-  a: ReactQueryConfig,
-  b: ReactQueryConfig
-): ReactQueryConfig {
-  return {
-    shared: {
-      ...a.shared,
-      ...b.shared,
-    },
-    queries: {
-      ...a.queries,
-      ...b.queries,
-    },
-    mutations: {
-      ...a.mutations,
-      ...b.mutations,
-    },
-  }
-}
-
-export function getResolvedQueryConfig<TResult, TError>(
-  queryCache: QueryCache,
-  queryKey: QueryKey,
-  contextConfig?: ReactQueryConfig,
-  config?: QueryConfig<TResult, TError>
-): ResolvedQueryConfig<TResult, TError> {
-  const queryCacheConfig = queryCache.getDefaultConfig()
-
-  const resolvedConfig = {
-    ...DEFAULT_CONFIG.queries,
-    ...queryCacheConfig?.shared,
-    ...queryCacheConfig?.queries,
-    ...contextConfig?.shared,
-    ...contextConfig?.queries,
-    ...config,
-  } as ResolvedQueryConfig<TResult, TError>
-
-  const result = resolvedConfig.queryKeySerializerFn(queryKey)
-
-  resolvedConfig.queryCache = queryCache
-  resolvedConfig.queryHash = result[0]
-  resolvedConfig.queryKey = result[1]
-
-  return resolvedConfig
-}
-
-export function isResolvedQueryConfig<TResult, TError>(
-  config: any
-): config is ResolvedQueryConfig<TResult, TError> {
-  return Boolean(config.queryHash)
-}
-
-export function getResolvedMutationConfig<
-  TResult,
-  TError,
-  TVariables,
-  TSnapshot
->(
-  queryCache: QueryCache,
-  contextConfig?: ReactQueryConfig,
-  config?: MutationConfig<TResult, TError, TVariables, TSnapshot>
-): MutationConfig<TResult, TError, TVariables, TSnapshot> {
-  const queryCacheConfig = queryCache.getDefaultConfig()
-  return {
-    ...DEFAULT_CONFIG.mutations,
-    ...queryCacheConfig?.shared,
-    ...queryCacheConfig?.mutations,
-    ...contextConfig?.shared,
-    ...contextConfig?.mutations,
-    ...config,
-  } as MutationConfig<TResult, TError, TVariables, TSnapshot>
+export function getDefaultOptions(): DefaultOptions {
+  return DEFAULT_OPTIONS
+}
+
+export function mergeDefaultOptions(
+  a: DefaultOptions,
+  b?: DefaultOptions
+): DefaultOptions {
+  return b
+    ? {
+        queries: {
+          ...a.queries,
+          ...b.queries,
+        },
+        mutations: {
+          ...a.mutations,
+          ...b.mutations,
+        },
+      }
+    : a
 }