@tanstack/query-core 4.25.0 → 4.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-core",
-  "version": "4.25.0",
+  "version": "4.26.1",
   "description": "The framework agnostic core that powers TanStack Query",
   "author": "tannerlinsley",
   "license": "MIT",

package/src/mutation.ts

@@ -89,10 +89,11 @@ export class Mutation<
   TContext = unknown,
 > extends Removable {
   state: MutationState<TData, TError, TVariables, TContext>
-  options: MutationOptions<TData, TError, TVariables, TContext>
+  options!: MutationOptions<TData, TError, TVariables, TContext>
   mutationId: number
 
   private observers: MutationObserver<TData, TError, TVariables, TContext>[]
+  private defaultOptions?: MutationOptions<TData, TError, TVariables, TContext>
   private mutationCache: MutationCache
   private logger: Logger
   private retryer?: Retryer<TData>
@@ -100,20 +101,25 @@ export class Mutation<
   constructor(config: MutationConfig<TData, TError, TVariables, TContext>) {
     super()
 
-    this.options = {
-      ...config.defaultOptions,
-      ...config.options,
-    }
+    this.defaultOptions = config.defaultOptions
     this.mutationId = config.mutationId
     this.mutationCache = config.mutationCache
     this.logger = config.logger || defaultLogger
     this.observers = []
     this.state = config.state || getDefaultState()
 
-    this.updateCacheTime(this.options.cacheTime)
+    this.setOptions(config.options)
     this.scheduleGc()
   }
 
+  setOptions(
+    options?: MutationOptions<TData, TError, TVariables, TContext>,
+  ): void {
+    this.options = { ...this.defaultOptions, ...options }
+
+    this.updateCacheTime(this.options.cacheTime)
+  }
+
   get meta(): MutationMeta | undefined {
     return this.options.meta
   }
@@ -223,6 +229,15 @@ export class Mutation<
         this.state.context!,
       )
 
+      // Notify cache callback
+      await this.mutationCache.config.onSettled?.(
+        data,
+        null,
+        this.state.variables,
+        this.state.context,
+        this as Mutation<unknown, unknown, unknown, unknown>,
+      )
+
       await this.options.onSettled?.(
         data,
         null,
@@ -252,6 +267,15 @@ export class Mutation<
           this.state.context,
         )
 
+        // Notify cache callback
+        await this.mutationCache.config.onSettled?.(
+          undefined,
+          error,
+          this.state.variables,
+          this.state.context,
+          this as Mutation<unknown, unknown, unknown, unknown>,
+        )
+
         await this.options.onSettled?.(
           undefined,
           error as TError,

package/src/mutationCache.ts

@@ -25,7 +25,14 @@ interface MutationCacheConfig {
   ) => Promise<unknown> | unknown
   onMutate?: (
     variables: unknown,
-    mutation: Mutation<unknown, unknown, unknown, unknown>,
+    mutation: Mutation<unknown, unknown, unknown>,
+  ) => Promise<unknown> | unknown
+  onSettled?: (
+    data: unknown | undefined,
+    error: unknown | null,
+    variables: unknown,
+    context: unknown,
+    mutation: Mutation<unknown, unknown, unknown>,
   ) => Promise<unknown> | unknown
 }
 

package/src/mutationObserver.ts

@@ -74,6 +74,7 @@ export class MutationObserver<
         observer: this,
       })
     }
+    this.currentMutation?.setOptions(this.options)
   }
 
   protected onUnsubscribe(): void {

package/src/query.ts

@@ -434,6 +434,11 @@ export class Query<
       if (!isCancelledError(error)) {
         // Notify cache callback
         this.cache.config.onError?.(error, this as Query<any, any, any, any>)
+        this.cache.config.onSettled?.(
+          this.state.data,
+          error,
+          this as Query<any, any, any, any>,
+        )
 
         if (process.env.NODE_ENV !== 'production') {
           this.logger.error(error)
@@ -466,6 +471,11 @@ export class Query<
 
         // Notify cache callback
         this.cache.config.onSuccess?.(data, this as Query<any, any, any, any>)
+        this.cache.config.onSettled?.(
+          data,
+          this.state.error,
+          this as Query<any, any, any, any>,
+        )
 
         if (!this.isFetchingOptimistic) {
           // Schedule query gc after fetching

package/src/queryCache.ts

@@ -13,6 +13,11 @@ import type { QueryObserver } from './queryObserver'
 interface QueryCacheConfig {
   onError?: (error: unknown, query: Query<unknown, unknown, unknown>) => void
   onSuccess?: (data: unknown, query: Query<unknown, unknown, unknown>) => void
+  onSettled?: (
+    data: unknown | undefined,
+    error: unknown | null,
+    query: Query<unknown, unknown, unknown>,
+  ) => void
 }
 
 interface QueryHashMap {

package/src/tests/mutationCache.test.tsx

@@ -3,11 +3,13 @@ import { queryKey, sleep, executeMutation, createQueryClient } from './utils'
 import { MutationCache, MutationObserver } from '..'
 
 describe('mutationCache', () => {
-  describe('MutationCacheConfig.onError', () => {
-    test('should be called when a mutation errors', async () => {
+  describe('MutationCacheConfig error callbacks', () => {
+    test('should call onError and onSettled when a mutation errors', async () => {
       const key = queryKey()
       const onError = jest.fn()
-      const testCache = new MutationCache({ onError })
+      const onSuccess = jest.fn()
+      const onSettled = jest.fn()
+      const testCache = new MutationCache({ onError, onSuccess, onSettled })
       const testClient = createQueryClient({ mutationCache: testCache })
 
       try {
@@ -20,7 +22,17 @@ describe('mutationCache', () => {
       } catch {}
 
       const mutation = testCache.getAll()[0]
+      expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith('error', 'vars', 'context', mutation)
+      expect(onSuccess).not.toHaveBeenCalled()
+      expect(onSettled).toHaveBeenCalledTimes(1)
+      expect(onSettled).toHaveBeenCalledWith(
+        undefined,
+        'error',
+        'vars',
+        'context',
+        mutation,
+      )
     })
 
     test('should be awaited', async () => {
@@ -31,7 +43,12 @@ describe('mutationCache', () => {
         await sleep(1)
         states.push(2)
       }
-      const testCache = new MutationCache({ onError })
+      const onSettled = async () => {
+        states.push(5)
+        await sleep(1)
+        states.push(6)
+      }
+      const testCache = new MutationCache({ onError, onSettled })
       const testClient = createQueryClient({ mutationCache: testCache })
 
       try {
@@ -44,17 +61,24 @@ describe('mutationCache', () => {
             await sleep(1)
             states.push(4)
           },
+          onSettled: async () => {
+            states.push(7)
+            await sleep(1)
+            states.push(8)
+          },
         })
       } catch {}
 
-      expect(states).toEqual([1, 2, 3, 4])
+      expect(states).toEqual([1, 2, 3, 4, 5, 6, 7, 8])
     })
   })
-  describe('MutationCacheConfig.onSuccess', () => {
-    test('should be called when a mutation is successful', async () => {
+  describe('MutationCacheConfig success callbacks', () => {
+    test('should call onSuccess and onSettled when a mutation is successful', async () => {
       const key = queryKey()
+      const onError = jest.fn()
       const onSuccess = jest.fn()
-      const testCache = new MutationCache({ onSuccess })
+      const onSettled = jest.fn()
+      const testCache = new MutationCache({ onError, onSuccess, onSettled })
       const testClient = createQueryClient({ mutationCache: testCache })
 
       try {
@@ -67,12 +91,22 @@ describe('mutationCache', () => {
       } catch {}
 
       const mutation = testCache.getAll()[0]
+      expect(onSuccess).toHaveBeenCalledTimes(1)
       expect(onSuccess).toHaveBeenCalledWith(
         { data: 5 },
         'vars',
         'context',
         mutation,
       )
+      expect(onError).not.toHaveBeenCalled()
+      expect(onSettled).toHaveBeenCalledTimes(1)
+      expect(onSettled).toHaveBeenCalledWith(
+        { data: 5 },
+        null,
+        'vars',
+        'context',
+        mutation,
+      )
     })
     test('should be awaited', async () => {
       const key = queryKey()
@@ -82,7 +116,12 @@ describe('mutationCache', () => {
         await sleep(1)
         states.push(2)
       }
-      const testCache = new MutationCache({ onSuccess })
+      const onSettled = async () => {
+        states.push(5)
+        await sleep(1)
+        states.push(6)
+      }
+      const testCache = new MutationCache({ onSuccess, onSettled })
       const testClient = createQueryClient({ mutationCache: testCache })
 
       await executeMutation(testClient, {
@@ -94,9 +133,14 @@ describe('mutationCache', () => {
           await sleep(1)
           states.push(4)
         },
+        onSettled: async () => {
+          states.push(7)
+          await sleep(1)
+          states.push(8)
+        },
       })
 
-      expect(states).toEqual([1, 2, 3, 4])
+      expect(states).toEqual([1, 2, 3, 4, 5, 6, 7, 8])
     })
   })
   describe('MutationCacheConfig.onMutate', () => {

package/src/tests/mutations.test.tsx

@@ -2,6 +2,7 @@ import type { QueryClient } from '..'
 import { createQueryClient, executeMutation, queryKey, sleep } from './utils'
 import type { MutationState } from '../mutation'
 import { MutationObserver } from '../mutationObserver'
+import { waitFor } from '@testing-library/react'
 
 describe('mutations', () => {
   let queryClient: QueryClient
@@ -358,4 +359,34 @@ describe('mutations', () => {
     expect(onSuccess).not.toHaveBeenCalled()
     expect(onSettled).not.toHaveBeenCalled()
   })
+
+  test('mutation callbacks should see updated options', async () => {
+    const onSuccess = jest.fn()
+
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: async () => {
+        sleep(100)
+        return 'update'
+      },
+      onSuccess: () => {
+        onSuccess(1)
+      },
+    })
+
+    void mutation.mutate()
+
+    mutation.setOptions({
+      mutationFn: async () => {
+        sleep(100)
+        return 'update'
+      },
+      onSuccess: () => {
+        onSuccess(2)
+      },
+    })
+
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledTimes(1))
+
+    expect(onSuccess).toHaveBeenCalledWith(2)
+  })
 })

package/src/tests/queryCache.test.tsx

@@ -205,29 +205,41 @@ describe('queryCache', () => {
     })
   })
 
-  describe('QueryCacheConfig.onError', () => {
-    test('should be called when a query errors', async () => {
+  describe('QueryCacheConfig error callbacks', () => {
+    test('should call onError and onSettled when a query errors', async () => {
       const key = queryKey()
+      const onSuccess = jest.fn()
+      const onSettled = jest.fn()
       const onError = jest.fn()
-      const testCache = new QueryCache({ onError })
+      const testCache = new QueryCache({ onSuccess, onError, onSettled })
       const testClient = createQueryClient({ queryCache: testCache })
       await testClient.prefetchQuery(key, () =>
         Promise.reject<unknown>('error'),
       )
       const query = testCache.find(key)
+      expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith('error', query)
+      expect(onSuccess).not.toHaveBeenCalled()
+      expect(onSettled).toHaveBeenCalledTimes(1)
+      expect(onSettled).toHaveBeenCalledWith(undefined, 'error', query)
     })
   })
 
-  describe('QueryCacheConfig.onSuccess', () => {
-    test('should be called when a query is successful', async () => {
+  describe('QueryCacheConfig success callbacks', () => {
+    test('should call onSuccess and onSettled when a query is successful', async () => {
       const key = queryKey()
       const onSuccess = jest.fn()
-      const testCache = new QueryCache({ onSuccess })
+      const onSettled = jest.fn()
+      const onError = jest.fn()
+      const testCache = new QueryCache({ onSuccess, onError, onSettled })
       const testClient = createQueryClient({ queryCache: testCache })
       await testClient.prefetchQuery(key, () => Promise.resolve({ data: 5 }))
       const query = testCache.find(key)
+      expect(onSuccess).toHaveBeenCalledTimes(1)
       expect(onSuccess).toHaveBeenCalledWith({ data: 5 }, query)
+      expect(onError).not.toHaveBeenCalled()
+      expect(onSettled).toHaveBeenCalledTimes(1)
+      expect(onSettled).toHaveBeenCalledWith({ data: 5 }, null, query)
     })
   })