@tanstack/react-query 4.29.11 → 4.29.13

package/codemods/v4/key-transformation.js

@@ -37,7 +37,7 @@ const transformQueryClientUsages = ({ jscodeshift, utils, root, filePath }) => {
       'removeQueries',
       'resetQueries',
     ],
-    replacer
+    replacer,
   )
 }
 
@@ -61,7 +61,7 @@ const transformUseQueriesUsages = ({ jscodeshift, utils, root }) => {
         jscodeshift.property(
           'init',
           jscodeshift.identifier('queries'),
-          node.original.arguments[0]
+          node.original.arguments[0],
         ),
       ]),
     ])
@@ -96,7 +96,7 @@ const transformUseQueryLikeUsages = ({
       root,
       filePath,
       keyName: 'queryKey',
-    })
+    }),
   )
   transformer.execute(
     ['useMutation'],
@@ -105,7 +105,7 @@ const transformUseQueryLikeUsages = ({
       root,
       filePath,
       keyName: 'mutationKey',
-    })
+    }),
   )
 }
 

package/codemods/v4/utils/index.js

@@ -1,7 +1,7 @@
 module.exports = ({ root, jscodeshift }) => {
   const findImportIdentifierOf = (importSpecifiers, identifier) => {
     const specifier = importSpecifiers
-      .filter(node => node.value.imported.name === identifier)
+      .filter((node) => node.value.imported.name === identifier)
       .paths()
 
     if (specifier.length > 0) {
@@ -20,7 +20,7 @@ module.exports = ({ root, jscodeshift }) => {
       })
       .find(jscodeshift.ImportSpecifier, {})
 
-  const locateImports = identifiers => {
+  const locateImports = (identifiers) => {
     const findNamespaceImportIdentifier = () => {
       const specifier = root
         .find(jscodeshift.ImportDeclaration, {
@@ -59,7 +59,7 @@ module.exports = ({ root, jscodeshift }) => {
     for (const identifier of identifiers) {
       identifierMap[identifier] = findImportIdentifierOf(
         importSpecifiers,
-        identifier
+        identifier,
       )
     }
 
@@ -81,21 +81,21 @@ module.exports = ({ root, jscodeshift }) => {
         },
       })
 
-  const findQueryClientIdentifiers = importIdentifiers =>
+  const findQueryClientIdentifiers = (importIdentifiers) =>
     root
       .find(jscodeshift.VariableDeclarator, {})
-      .filter(node => {
+      .filter((node) => {
         if (node.value.init) {
           const initializer = node.value.init
 
           return (
             isClassInstantiationOf(
               initializer,
-              getSelectorByImports(importIdentifiers, 'QueryClient')
+              getSelectorByImports(importIdentifiers, 'QueryClient'),
             ) ||
             isFunctionCallOf(
               initializer,
-              getSelectorByImports(importIdentifiers, 'useQueryClient')
+              getSelectorByImports(importIdentifiers, 'useQueryClient'),
             )
           )
         }
@@ -103,18 +103,18 @@ module.exports = ({ root, jscodeshift }) => {
         return false
       })
       .paths()
-      .map(node => node.value.id.name)
+      .map((node) => node.value.id.name)
 
-  const isCallExpression = node =>
+  const isCallExpression = (node) =>
     jscodeshift.match(node, { type: jscodeshift.CallExpression.name })
 
-  const isIdentifier = node =>
+  const isIdentifier = (node) =>
     jscodeshift.match(node, { type: jscodeshift.Identifier.name })
 
-  const isMemberExpression = node =>
+  const isMemberExpression = (node) =>
     jscodeshift.match(node, { type: jscodeshift.MemberExpression.name })
 
-  const isNewExpression = node =>
+  const isNewExpression = (node) =>
     jscodeshift.match(node, { type: jscodeshift.NewExpression.name })
 
   const isClassInstantiationOf = (node, selector) => {

package/codemods/v4/utils/replacers/key-replacer.js

@@ -2,17 +2,17 @@
 const UnprocessableKeyError = require('../unprocessable-key-error')
 
 module.exports = ({ jscodeshift, root, filePath, keyName = 'queryKey' }) => {
-  const isArrayExpression = node =>
+  const isArrayExpression = (node) =>
     jscodeshift.match(node, { type: jscodeshift.ArrayExpression.name })
 
-  const isStringLiteral = node =>
+  const isStringLiteral = (node) =>
     jscodeshift.match(node, { type: jscodeshift.StringLiteral.name }) ||
     jscodeshift.match(node, { type: jscodeshift.Literal.name })
 
-  const isTemplateLiteral = node =>
+  const isTemplateLiteral = (node) =>
     jscodeshift.match(node, { type: jscodeshift.TemplateLiteral.name })
 
-  const findVariableDeclaration = node => {
+  const findVariableDeclaration = (node) => {
     const declarations = root
       .find(jscodeshift.VariableDeclarator, {
         id: {
@@ -25,7 +25,7 @@ module.exports = ({ jscodeshift, root, filePath, keyName = 'queryKey' }) => {
     return declarations.length > 0 ? declarations[0] : null
   }
 
-  const createKeyValue = node => {
+  const createKeyValue = (node) => {
     // When the node is a string literal we convert it into an array of strings.
     if (isStringLiteral(node)) {
       return jscodeshift.arrayExpression([
@@ -47,7 +47,7 @@ module.exports = ({ jscodeshift, root, filePath, keyName = 'queryKey' }) => {
 
       if (!variableDeclaration) {
         throw new UnprocessableKeyError(
-          `In file ${filePath} at line ${node.loc.start.line} the type of identifier \`${node.name}\` couldn't be recognized, so the codemod couldn't be applied. Please migrate manually.`
+          `In file ${filePath} at line ${node.loc.start.line} the type of identifier \`${node.name}\` couldn't be recognized, so the codemod couldn't be applied. Please migrate manually.`,
         )
       }
 
@@ -60,20 +60,20 @@ module.exports = ({ jscodeshift, root, filePath, keyName = 'queryKey' }) => {
     }
 
     throw new UnprocessableKeyError(
-      `In file ${filePath} at line ${node.loc.start.line} the type of the \`${keyName}\` couldn't be recognized, so the codemod couldn't be applied. Please migrate manually.`
+      `In file ${filePath} at line ${node.loc.start.line} the type of the \`${keyName}\` couldn't be recognized, so the codemod couldn't be applied. Please migrate manually.`,
     )
   }
 
-  const createKeyProperty = node =>
+  const createKeyProperty = (node) =>
     jscodeshift.property(
       'init',
       jscodeshift.identifier(keyName),
-      createKeyValue(node)
+      createKeyValue(node),
     )
 
   const getPropertyFromObjectExpression = (objectExpression, propertyName) =>
     objectExpression.properties.find(
-      property => property.key.name === propertyName
+      (property) => property.key.name === propertyName,
     ) ?? null
 
   const buildWithTypeArguments = (node, builder) => {
@@ -110,27 +110,27 @@ module.exports = ({ jscodeshift, root, filePath, keyName = 'queryKey' }) => {
       ) {
         const originalKey = getPropertyFromObjectExpression(
           firstArgument,
-          keyName
+          keyName,
         )
 
         if (!originalKey) {
           throw new UnprocessableKeyError(
-            `In file ${filePath} at line ${node.loc.start.line} the \`${keyName}\` couldn't be found. Did you forget to add it?`
+            `In file ${filePath} at line ${node.loc.start.line} the \`${keyName}\` couldn't be found. Did you forget to add it?`,
           )
         }
 
         const restOfTheProperties = firstArgument.properties.filter(
-          item => item.key.name !== keyName
+          (item) => item.key.name !== keyName,
         )
 
-        return buildWithTypeArguments(node, originalNode =>
+        return buildWithTypeArguments(node, (originalNode) =>
           jscodeshift.callExpression(originalNode.original.callee, [
             jscodeshift.objectExpression([
               createKeyProperty(originalKey.value),
               ...restOfTheProperties,
             ]),
             ...restOfTheArguments,
-          ])
+          ]),
         )
       }
 
@@ -139,11 +139,11 @@ module.exports = ({ jscodeshift, root, filePath, keyName = 'queryKey' }) => {
         return node
       }
 
-      return buildWithTypeArguments(node, originalNode =>
+      return buildWithTypeArguments(node, (originalNode) =>
         jscodeshift.callExpression(originalNode.original.callee, [
           createKeyValue(firstArgument),
           ...restOfTheArguments,
-        ])
+        ]),
       )
     } catch (error) {
       if (error.name === 'UnprocessableKeyError') {

package/codemods/v4/utils/transformers/query-cache-transformer.js

@@ -2,15 +2,15 @@ module.exports = ({ jscodeshift, utils, root }) => {
   const isGetQueryCacheMethodCall = (
     initializer,
     importIdentifiers,
-    knownQueryClientIds
+    knownQueryClientIds,
   ) => {
-    const isKnownQueryClient = node =>
+    const isKnownQueryClient = (node) =>
       utils.isIdentifier(node) && knownQueryClientIds.includes(node.name)
 
-    const isGetQueryCacheIdentifier = node =>
+    const isGetQueryCacheIdentifier = (node) =>
       utils.isIdentifier(node) && node.name === 'getQueryCache'
 
-    const isValidInitializer = node =>
+    const isValidInitializer = (node) =>
       utils.isCallExpression(node) && utils.isMemberExpression(node.callee)
 
     if (isValidInitializer(initializer)) {
@@ -21,7 +21,7 @@ module.exports = ({ jscodeshift, utils, root }) => {
         (isKnownQueryClient(instance) ||
           utils.isFunctionCallOf(
             instance,
-            utils.getSelectorByImports(importIdentifiers, 'useQueryClient')
+            utils.getSelectorByImports(importIdentifiers, 'useQueryClient'),
           ))
       )
     }
@@ -31,21 +31,21 @@ module.exports = ({ jscodeshift, utils, root }) => {
 
   const findQueryCacheInstantiations = (
     importIdentifiers,
-    knownQueryClientIds
+    knownQueryClientIds,
   ) =>
-    root.find(jscodeshift.VariableDeclarator, {}).filter(node => {
+    root.find(jscodeshift.VariableDeclarator, {}).filter((node) => {
       if (node.value.init) {
         const initializer = node.value.init
 
         return (
           utils.isClassInstantiationOf(
             initializer,
-            utils.getSelectorByImports(importIdentifiers, 'QueryCache')
+            utils.getSelectorByImports(importIdentifiers, 'QueryCache'),
           ) ||
           isGetQueryCacheMethodCall(
             initializer,
             importIdentifiers,
-            knownQueryClientIds
+            knownQueryClientIds,
           )
         )
       }
@@ -53,35 +53,36 @@ module.exports = ({ jscodeshift, utils, root }) => {
       return false
     })
 
-  const filterQueryCacheMethodCalls = node =>
+  const filterQueryCacheMethodCalls = (node) =>
     utils.isIdentifier(node) && ['find', 'findAll'].includes(node.name)
 
-  const findQueryCacheMethodCalls = importIdentifiers => {
+  const findQueryCacheMethodCalls = (importIdentifiers) => {
     /**
      * Here we collect all query client instantiations. We have to make aware of them because the query cache can be
      * accessed by the query client as well.
      */
-    const queryClientIdentifiers = utils.queryClient.findQueryClientIdentifiers(
-      importIdentifiers
-    )
+    const queryClientIdentifiers =
+      utils.queryClient.findQueryClientIdentifiers(importIdentifiers)
     /**
      * Here we collect all query cache instantiations. The reason is simple: the methods can be called on query cache
      * instances, to locate the possible usages we need to be aware of the identifier names.
      */
     const queryCacheIdentifiers = findQueryCacheInstantiations(
       importIdentifiers,
-      queryClientIdentifiers
+      queryClientIdentifiers,
     )
       .paths()
-      .map(node => node.value.id.name)
+      .map((node) => node.value.id.name)
 
     return (
       utils
         // First, we need to find all method calls.
         .findAllMethodCalls()
         // Then we narrow the collection to all `fetch` and `fetchAll` methods.
-        .filter(node => filterQueryCacheMethodCalls(node.value.callee.property))
-        .filter(node => {
+        .filter((node) =>
+          filterQueryCacheMethodCalls(node.value.callee.property),
+        )
+        .filter((node) => {
           const object = node.value.callee.object
 
           // If the method is called on a `QueryCache` instance, we keep it in the collection.
@@ -94,7 +95,7 @@ module.exports = ({ jscodeshift, utils, root }) => {
             return isGetQueryCacheMethodCall(
               object,
               importIdentifiers,
-              queryClientIdentifiers
+              queryClientIdentifiers,
             )
           }
 
@@ -103,9 +104,9 @@ module.exports = ({ jscodeshift, utils, root }) => {
     )
   }
 
-  const execute = replacer => {
+  const execute = (replacer) => {
     findQueryCacheMethodCalls(
-      utils.locateImports(['QueryCache', 'QueryClient', 'useQueryClient'])
+      utils.locateImports(['QueryCache', 'QueryClient', 'useQueryClient']),
     ).replaceWith(replacer)
   }
 

package/codemods/v4/utils/transformers/query-client-transformer.js

@@ -7,19 +7,18 @@ module.exports = ({ jscodeshift, utils, root }) => {
      * Here we collect all query client instantiations. We have to make aware of them because some method calls might
      * be invoked on these instances.
      */
-    const queryClientIdentifiers = utils.queryClient.findQueryClientIdentifiers(
-      importIdentifiers
-    )
+    const queryClientIdentifiers =
+      utils.queryClient.findQueryClientIdentifiers(importIdentifiers)
 
     return (
       utils
         // First, we need to find all method calls.
         .findAllMethodCalls()
         // Then we narrow the collection to `QueryClient` methods.
-        .filter(node =>
-          filterQueryClientMethodCalls(node.value.callee.property, methods)
+        .filter((node) =>
+          filterQueryClientMethodCalls(node.value.callee.property, methods),
         )
-        .filter(node => {
+        .filter((node) => {
           const object = node.value.callee.object
 
           // If the method is called on a `QueryClient` instance, we keep it in the collection.
@@ -30,7 +29,7 @@ module.exports = ({ jscodeshift, utils, root }) => {
           // If the method is called on the return value of `useQueryClient` hook, we keep it in the collection.
           return utils.isFunctionCallOf(
             object,
-            utils.getSelectorByImports(importIdentifiers, 'useQueryClient')
+            utils.getSelectorByImports(importIdentifiers, 'useQueryClient'),
           )
         })
     )
@@ -39,7 +38,7 @@ module.exports = ({ jscodeshift, utils, root }) => {
   const execute = (methods, replacer) => {
     findQueryClientMethodCalls(
       utils.locateImports(['QueryClient', 'useQueryClient']),
-      methods
+      methods,
     ).replaceWith(replacer)
   }
 

package/codemods/v4/utils/transformers/use-query-like-transformer.js

@@ -16,13 +16,13 @@ module.exports = ({ jscodeshift, utils, root }) => {
       // First, we need to find all call expressions.
       .find(jscodeshift.CallExpression, {})
       // Then we narrow the collection to the `useQuery` like hook calls.
-      .filter(node =>
-        filterUseQueryLikeHookCalls(node.value, importIdentifiers, hooks)
+      .filter((node) =>
+        filterUseQueryLikeHookCalls(node.value, importIdentifiers, hooks),
       )
 
   const execute = (hooks, replacer) => {
     findUseQueryLikeHookCalls(utils.locateImports(hooks), hooks).replaceWith(
-      replacer
+      replacer,
     )
   }
 

package/package.json

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

package/src/__tests__/useQuery.test.tsx

@@ -5887,4 +5887,37 @@ describe('useQuery', () => {
     fireEvent.click(fetchBtn)
     await waitFor(() => rendered.getByText('data: 3'))
   })
+
+  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

@@ -77,10 +77,17 @@ export function useBaseQuery<
 
   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(),