@tanstack/react-query 5.0.0-alpha.59 → 5.0.0-alpha.61

package/build/lib/useBaseQuery.cjs

@@ -41,7 +41,14 @@ function useBaseQuery(options, Observer, queryClient) {
   errorBoundaryUtils.useClearResetErrorBoundary(errorResetBoundary);
   const [observer] = React__namespace.useState(() => new Observer(client, defaultedOptions));
   const result = observer.getOptimisticResult(defaultedOptions);
-  React__namespace.useSyncExternalStore(React__namespace.useCallback(onStoreChange => isRestoring$1 ? () => undefined : observer.subscribe(queryCore.notifyManager.batchCalls(onStoreChange)), [observer, isRestoring$1]), () => observer.getCurrentResult(), () => observer.getCurrentResult());
+  React__namespace.useSyncExternalStore(React__namespace.useCallback(onStoreChange => {
+    const unsubscribe = isRestoring$1 ? () => undefined : observer.subscribe(queryCore.notifyManager.batchCalls(onStoreChange));
+
+    // Update result to make sure we did not miss any query updates
+    // between creating the observer and subscribing to it.
+    observer.updateResult();
+    return unsubscribe;
+  }, [observer, isRestoring$1]), () => observer.getCurrentResult(), () => observer.getCurrentResult());
   React__namespace.useEffect(() => {
     // Do not notify on updates because of changes in the options because
     // these changes should already be reflected in the optimistic result.

package/build/lib/useBaseQuery.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useBaseQuery.cjs","sources":["../../src/useBaseQuery.ts"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'\nimport { notifyManager } from '@tanstack/query-core'\nimport { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'\nimport { useQueryClient } from './QueryClientProvider'\nimport type { UseBaseQueryOptions } from './types'\nimport { useIsRestoring } from './isRestoring'\nimport {\n  ensurePreventErrorBoundaryRetry,\n  getHasError,\n  useClearResetErrorBoundary,\n} from './errorBoundaryUtils'\nimport { ensureStaleTime, shouldSuspend, fetchOptimistic } from './suspense'\n\nexport function useBaseQuery<\n  TQueryFnData,\n  TError,\n  TData,\n  TQueryData,\n  TQueryKey extends QueryKey,\n>(\n  options: UseBaseQueryOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryData,\n    TQueryKey\n  >,\n  Observer: typeof QueryObserver,\n  queryClient?: QueryClient,\n) {\n  const client = useQueryClient(queryClient)\n  const isRestoring = useIsRestoring()\n  const errorResetBoundary = useQueryErrorResetBoundary()\n  const defaultedOptions = client.defaultQueryOptions(options)\n\n  // Make sure results are optimistically set in fetching state before subscribing or updating options\n  defaultedOptions._optimisticResults = isRestoring\n    ? 'isRestoring'\n    : 'optimistic'\n\n  ensureStaleTime(defaultedOptions)\n  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary)\n\n  useClearResetErrorBoundary(errorResetBoundary)\n\n  const [observer] = React.useState(\n    () =>\n      new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(\n        client,\n        defaultedOptions,\n      ),\n  )\n\n  const result = observer.getOptimisticResult(defaultedOptions)\n\n  React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) =>\n        isRestoring\n          ? () => undefined\n          : observer.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [observer, isRestoring],\n    ),\n    () => observer.getCurrentResult(),\n    () => observer.getCurrentResult(),\n  )\n\n  React.useEffect(() => {\n    // Do not notify on updates because of changes in the options because\n    // these changes should already be reflected in the optimistic result.\n    observer.setOptions(defaultedOptions, { listeners: false })\n  }, [defaultedOptions, observer])\n\n  // Handle suspense\n  if (shouldSuspend(defaultedOptions, result, isRestoring)) {\n    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary)\n  }\n\n  // Handle error boundary\n  if (\n    getHasError({\n      result,\n      errorResetBoundary,\n      throwOnError: defaultedOptions.throwOnError,\n      query: observer.getCurrentQuery(),\n    })\n  ) {\n    throw result.error\n  }\n\n  // Handle result property usage tracking\n  return !defaultedOptions.notifyOnChangeProps\n    ? observer.trackResult(result)\n    : result\n}\n"],"names":["defaultedOptions","ensurePreventErrorBoundaryRetry","observer","listeners","query"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO;AAiBL;AACA;AACA;AACA;;AAEA;AACAA;;AAKAC;;AAIA;AAQA;;;AAeE;AACA;AACAC;AAAwCC;AAAiB;AAC3D;;AAEA;;AAEE;AACF;;AAEA;AACA;;;;AAKIC;AACF;;AAGF;;AAEA;AACA;AAGF;;"}
+{"version":3,"file":"useBaseQuery.cjs","sources":["../../src/useBaseQuery.ts"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'\nimport { notifyManager } from '@tanstack/query-core'\nimport { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'\nimport { useQueryClient } from './QueryClientProvider'\nimport type { UseBaseQueryOptions } from './types'\nimport { useIsRestoring } from './isRestoring'\nimport {\n  ensurePreventErrorBoundaryRetry,\n  getHasError,\n  useClearResetErrorBoundary,\n} from './errorBoundaryUtils'\nimport { ensureStaleTime, shouldSuspend, fetchOptimistic } from './suspense'\n\nexport function useBaseQuery<\n  TQueryFnData,\n  TError,\n  TData,\n  TQueryData,\n  TQueryKey extends QueryKey,\n>(\n  options: UseBaseQueryOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryData,\n    TQueryKey\n  >,\n  Observer: typeof QueryObserver,\n  queryClient?: QueryClient,\n) {\n  const client = useQueryClient(queryClient)\n  const isRestoring = useIsRestoring()\n  const errorResetBoundary = useQueryErrorResetBoundary()\n  const defaultedOptions = client.defaultQueryOptions(options)\n\n  // Make sure results are optimistically set in fetching state before subscribing or updating options\n  defaultedOptions._optimisticResults = isRestoring\n    ? 'isRestoring'\n    : 'optimistic'\n\n  ensureStaleTime(defaultedOptions)\n  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary)\n\n  useClearResetErrorBoundary(errorResetBoundary)\n\n  const [observer] = React.useState(\n    () =>\n      new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(\n        client,\n        defaultedOptions,\n      ),\n  )\n\n  const result = observer.getOptimisticResult(defaultedOptions)\n\n  React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) => {\n        const unsubscribe = isRestoring\n          ? () => undefined\n          : observer.subscribe(notifyManager.batchCalls(onStoreChange))\n\n        // Update result to make sure we did not miss any query updates\n        // between creating the observer and subscribing to it.\n        observer.updateResult()\n\n        return unsubscribe\n      },\n      [observer, isRestoring],\n    ),\n    () => observer.getCurrentResult(),\n    () => observer.getCurrentResult(),\n  )\n\n  React.useEffect(() => {\n    // Do not notify on updates because of changes in the options because\n    // these changes should already be reflected in the optimistic result.\n    observer.setOptions(defaultedOptions, { listeners: false })\n  }, [defaultedOptions, observer])\n\n  // Handle suspense\n  if (shouldSuspend(defaultedOptions, result, isRestoring)) {\n    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary)\n  }\n\n  // Handle error boundary\n  if (\n    getHasError({\n      result,\n      errorResetBoundary,\n      throwOnError: defaultedOptions.throwOnError,\n      query: observer.getCurrentQuery(),\n    })\n  ) {\n    throw result.error\n  }\n\n  // Handle result property usage tracking\n  return !defaultedOptions.notifyOnChangeProps\n    ? observer.trackResult(result)\n    : result\n}\n"],"names":["defaultedOptions","ensurePreventErrorBoundaryRetry","observer","listeners","query"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO;AAiBL;AACA;AACA;AACA;;AAEA;AACAA;;AAKAC;;AAIA;AAQA;;AAKM;;AAIA;AACA;;AAGA;;;AASJ;AACA;AACAC;AAAwCC;AAAiB;AAC3D;;AAEA;;AAEE;AACF;;AAEA;AACA;;;;AAKIC;AACF;;AAGF;;AAEA;AACA;AAGF;;"}

package/build/lib/useBaseQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBaseQuery.d.ts","sourceRoot":"","sources":["../../src/useBaseQuery.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAIhF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AASlD,wBAAgB,YAAY,CAC1B,YAAY,EACZ,MAAM,EACN,KAAK,EACL,UAAU,EACV,SAAS,SAAS,QAAQ,EAE1B,OAAO,EAAE,mBAAmB,CAC1B,YAAY,EACZ,MAAM,EACN,KAAK,EACL,UAAU,EACV,SAAS,CACV,EACD,QAAQ,EAAE,OAAO,aAAa,EAC9B,WAAW,CAAC,EAAE,WAAW,qEAkE1B"}
+{"version":3,"file":"useBaseQuery.d.ts","sourceRoot":"","sources":["../../src/useBaseQuery.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAIhF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AASlD,wBAAgB,YAAY,CAC1B,YAAY,EACZ,MAAM,EACN,KAAK,EACL,UAAU,EACV,SAAS,SAAS,QAAQ,EAE1B,OAAO,EAAE,mBAAmB,CAC1B,YAAY,EACZ,MAAM,EACN,KAAK,EACL,UAAU,EACV,SAAS,CACV,EACD,QAAQ,EAAE,OAAO,aAAa,EAC9B,WAAW,CAAC,EAAE,WAAW,qEAyE1B"}

package/build/lib/useBaseQuery.js

@@ -20,7 +20,14 @@ function useBaseQuery(options, Observer, queryClient) {
   useClearResetErrorBoundary(errorResetBoundary);
   const [observer] = React.useState(() => new Observer(client, defaultedOptions));
   const result = observer.getOptimisticResult(defaultedOptions);
-  React.useSyncExternalStore(React.useCallback(onStoreChange => isRestoring ? () => undefined : observer.subscribe(notifyManager.batchCalls(onStoreChange)), [observer, isRestoring]), () => observer.getCurrentResult(), () => observer.getCurrentResult());
+  React.useSyncExternalStore(React.useCallback(onStoreChange => {
+    const unsubscribe = isRestoring ? () => undefined : observer.subscribe(notifyManager.batchCalls(onStoreChange));
+
+    // Update result to make sure we did not miss any query updates
+    // between creating the observer and subscribing to it.
+    observer.updateResult();
+    return unsubscribe;
+  }, [observer, isRestoring]), () => observer.getCurrentResult(), () => observer.getCurrentResult());
   React.useEffect(() => {
     // Do not notify on updates because of changes in the options because
     // these changes should already be reflected in the optimistic result.

package/build/lib/useBaseQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBaseQuery.js","sources":["../../src/useBaseQuery.ts"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'\nimport { notifyManager } from '@tanstack/query-core'\nimport { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'\nimport { useQueryClient } from './QueryClientProvider'\nimport type { UseBaseQueryOptions } from './types'\nimport { useIsRestoring } from './isRestoring'\nimport {\n  ensurePreventErrorBoundaryRetry,\n  getHasError,\n  useClearResetErrorBoundary,\n} from './errorBoundaryUtils'\nimport { ensureStaleTime, shouldSuspend, fetchOptimistic } from './suspense'\n\nexport function useBaseQuery<\n  TQueryFnData,\n  TError,\n  TData,\n  TQueryData,\n  TQueryKey extends QueryKey,\n>(\n  options: UseBaseQueryOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryData,\n    TQueryKey\n  >,\n  Observer: typeof QueryObserver,\n  queryClient?: QueryClient,\n) {\n  const client = useQueryClient(queryClient)\n  const isRestoring = useIsRestoring()\n  const errorResetBoundary = useQueryErrorResetBoundary()\n  const defaultedOptions = client.defaultQueryOptions(options)\n\n  // Make sure results are optimistically set in fetching state before subscribing or updating options\n  defaultedOptions._optimisticResults = isRestoring\n    ? 'isRestoring'\n    : 'optimistic'\n\n  ensureStaleTime(defaultedOptions)\n  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary)\n\n  useClearResetErrorBoundary(errorResetBoundary)\n\n  const [observer] = React.useState(\n    () =>\n      new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(\n        client,\n        defaultedOptions,\n      ),\n  )\n\n  const result = observer.getOptimisticResult(defaultedOptions)\n\n  React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) =>\n        isRestoring\n          ? () => undefined\n          : observer.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [observer, isRestoring],\n    ),\n    () => observer.getCurrentResult(),\n    () => observer.getCurrentResult(),\n  )\n\n  React.useEffect(() => {\n    // Do not notify on updates because of changes in the options because\n    // these changes should already be reflected in the optimistic result.\n    observer.setOptions(defaultedOptions, { listeners: false })\n  }, [defaultedOptions, observer])\n\n  // Handle suspense\n  if (shouldSuspend(defaultedOptions, result, isRestoring)) {\n    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary)\n  }\n\n  // Handle error boundary\n  if (\n    getHasError({\n      result,\n      errorResetBoundary,\n      throwOnError: defaultedOptions.throwOnError,\n      query: observer.getCurrentQuery(),\n    })\n  ) {\n    throw result.error\n  }\n\n  // Handle result property usage tracking\n  return !defaultedOptions.notifyOnChangeProps\n    ? observer.trackResult(result)\n    : result\n}\n"],"names":["defaultedOptions","ensurePreventErrorBoundaryRetry","observer","listeners","query"],"mappings":";;;;;;;;;AAgBO;AAiBL;AACA;AACA;AACA;;AAEA;AACAA;;AAKAC;;AAIA;AAQA;;;AAeE;AACA;AACAC;AAAwCC;AAAiB;AAC3D;;AAEA;;AAEE;AACF;;AAEA;AACA;;;;AAKIC;AACF;;AAGF;;AAEA;AACA;AAGF;;"}
+{"version":3,"file":"useBaseQuery.js","sources":["../../src/useBaseQuery.ts"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'\nimport { notifyManager } from '@tanstack/query-core'\nimport { useQueryErrorResetBoundary } from './QueryErrorResetBoundary'\nimport { useQueryClient } from './QueryClientProvider'\nimport type { UseBaseQueryOptions } from './types'\nimport { useIsRestoring } from './isRestoring'\nimport {\n  ensurePreventErrorBoundaryRetry,\n  getHasError,\n  useClearResetErrorBoundary,\n} from './errorBoundaryUtils'\nimport { ensureStaleTime, shouldSuspend, fetchOptimistic } from './suspense'\n\nexport function useBaseQuery<\n  TQueryFnData,\n  TError,\n  TData,\n  TQueryData,\n  TQueryKey extends QueryKey,\n>(\n  options: UseBaseQueryOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryData,\n    TQueryKey\n  >,\n  Observer: typeof QueryObserver,\n  queryClient?: QueryClient,\n) {\n  const client = useQueryClient(queryClient)\n  const isRestoring = useIsRestoring()\n  const errorResetBoundary = useQueryErrorResetBoundary()\n  const defaultedOptions = client.defaultQueryOptions(options)\n\n  // Make sure results are optimistically set in fetching state before subscribing or updating options\n  defaultedOptions._optimisticResults = isRestoring\n    ? 'isRestoring'\n    : 'optimistic'\n\n  ensureStaleTime(defaultedOptions)\n  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary)\n\n  useClearResetErrorBoundary(errorResetBoundary)\n\n  const [observer] = React.useState(\n    () =>\n      new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(\n        client,\n        defaultedOptions,\n      ),\n  )\n\n  const result = observer.getOptimisticResult(defaultedOptions)\n\n  React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) => {\n        const unsubscribe = isRestoring\n          ? () => undefined\n          : observer.subscribe(notifyManager.batchCalls(onStoreChange))\n\n        // Update result to make sure we did not miss any query updates\n        // between creating the observer and subscribing to it.\n        observer.updateResult()\n\n        return unsubscribe\n      },\n      [observer, isRestoring],\n    ),\n    () => observer.getCurrentResult(),\n    () => observer.getCurrentResult(),\n  )\n\n  React.useEffect(() => {\n    // Do not notify on updates because of changes in the options because\n    // these changes should already be reflected in the optimistic result.\n    observer.setOptions(defaultedOptions, { listeners: false })\n  }, [defaultedOptions, observer])\n\n  // Handle suspense\n  if (shouldSuspend(defaultedOptions, result, isRestoring)) {\n    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary)\n  }\n\n  // Handle error boundary\n  if (\n    getHasError({\n      result,\n      errorResetBoundary,\n      throwOnError: defaultedOptions.throwOnError,\n      query: observer.getCurrentQuery(),\n    })\n  ) {\n    throw result.error\n  }\n\n  // Handle result property usage tracking\n  return !defaultedOptions.notifyOnChangeProps\n    ? observer.trackResult(result)\n    : result\n}\n"],"names":["defaultedOptions","ensurePreventErrorBoundaryRetry","observer","listeners","query"],"mappings":";;;;;;;;;AAgBO;AAiBL;AACA;AACA;AACA;;AAEA;AACAA;;AAKAC;;AAIA;AAQA;;AAKM;;AAIA;AACA;;AAGA;;;AASJ;AACA;AACAC;AAAwCC;AAAiB;AAC3D;;AAEA;;AAEE;AACF;;AAEA;AACA;;;;AAKIC;AACF;;AAGF;;AAEA;AACA;AAGF;;"}

package/package.json

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

package/src/__tests__/useQuery.test.tsx

@@ -5960,4 +5960,37 @@ describe('useQuery', () => {
 
     await waitFor(() => rendered.getByText('data: custom client'))
   })
+
+  it('should be notified of updates between create and subscribe', async () => {
+    const key = queryKey()
+
+    function Page() {
+      const mounted = React.useRef<boolean>(false)
+      const { data, status } = useQuery({
+        enabled: false,
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 5
+        },
+      })
+
+      // this simulates a synchronous update between the time the query is created
+      // and the time it is subscribed to that could be missed otherwise
+      if (!mounted.current) {
+        mounted.current = true
+        queryClient.setQueryData(key, 1)
+      }
+
+      return (
+        <div>
+          <span>status: {status}</span>
+          <span>data: {data}</span>
+        </div>
+      )
+    }
+    const rendered = renderWithClient(queryClient, <Page />)
+    await waitFor(() => rendered.getByText('status: success'))
+    await waitFor(() => rendered.getByText('data: 1'))
+  })
 })

package/src/useBaseQuery.ts

@@ -58,10 +58,17 @@ export function useBaseQuery<
 
   React.useSyncExternalStore(
     React.useCallback(
-      (onStoreChange) =>
-        isRestoring
+      (onStoreChange) => {
+        const unsubscribe = isRestoring
           ? () => undefined
-          : observer.subscribe(notifyManager.batchCalls(onStoreChange)),
+          : observer.subscribe(notifyManager.batchCalls(onStoreChange))
+
+        // Update result to make sure we did not miss any query updates
+        // between creating the observer and subscribing to it.
+        observer.updateResult()
+
+        return unsubscribe
+      },
       [observer, isRestoring],
     ),
     () => observer.getCurrentResult(),