@tanstack/query-core 4.0.0

package/src/tests/mutationCache.test.tsx

@@ -0,0 +1,260 @@
+import { waitFor } from '@testing-library/react'
+import {
+  queryKey,
+  sleep,
+  executeMutation,
+  createQueryClient,
+} from '../../../../tests/utils'
+import { MutationCache, MutationObserver } from '..'
+
+describe('mutationCache', () => {
+  describe('MutationCacheConfig.onError', () => {
+    test('should be called when a mutation errors', async () => {
+      const key = queryKey()
+      const onError = jest.fn()
+      const testCache = new MutationCache({ onError })
+      const testClient = createQueryClient({ mutationCache: testCache })
+
+      try {
+        await executeMutation(testClient, {
+          mutationKey: key,
+          variables: 'vars',
+          mutationFn: () => Promise.reject('error'),
+          onMutate: () => 'context',
+        })
+      } catch {}
+
+      const mutation = testCache.getAll()[0]
+      expect(onError).toHaveBeenCalledWith('error', 'vars', 'context', mutation)
+    })
+  })
+  describe('MutationCacheConfig.onSuccess', () => {
+    test('should be called when a mutation is successful', async () => {
+      const key = queryKey()
+      const onSuccess = jest.fn()
+      const testCache = new MutationCache({ onSuccess })
+      const testClient = createQueryClient({ mutationCache: testCache })
+
+      try {
+        await executeMutation(testClient, {
+          mutationKey: key,
+          variables: 'vars',
+          mutationFn: () => Promise.resolve({ data: 5 }),
+          onMutate: () => 'context',
+        })
+      } catch {}
+
+      const mutation = testCache.getAll()[0]
+      expect(onSuccess).toHaveBeenCalledWith(
+        { data: 5 },
+        'vars',
+        'context',
+        mutation,
+      )
+    })
+  })
+  describe('MutationCacheConfig.onMutate', () => {
+    test('should be called before a mutation executes', async () => {
+      const key = queryKey()
+      const onMutate = jest.fn()
+      const testCache = new MutationCache({ onMutate })
+      const testClient = createQueryClient({ mutationCache: testCache })
+
+      try {
+        await executeMutation(testClient, {
+          mutationKey: key,
+          variables: 'vars',
+          mutationFn: () => Promise.resolve({ data: 5 }),
+          onMutate: () => 'context',
+        })
+      } catch {}
+
+      const mutation = testCache.getAll()[0]
+      expect(onMutate).toHaveBeenCalledWith('vars', mutation)
+    })
+  })
+
+  describe('find', () => {
+    test('should filter correctly', async () => {
+      const testCache = new MutationCache()
+      const testClient = createQueryClient({ mutationCache: testCache })
+      const key = ['mutation', 'vars']
+      await executeMutation(testClient, {
+        mutationKey: key,
+        variables: 'vars',
+        mutationFn: () => Promise.resolve(),
+      })
+      const [mutation] = testCache.getAll()
+      expect(testCache.find({ mutationKey: key })).toEqual(mutation)
+      expect(
+        testCache.find({ mutationKey: ['mutation'], exact: false }),
+      ).toEqual(mutation)
+      expect(testCache.find({ mutationKey: ['unknown'] })).toEqual(undefined)
+      expect(
+        testCache.find({ predicate: (m) => m.options.variables === 'vars' }),
+      ).toEqual(mutation)
+    })
+  })
+
+  describe('findAll', () => {
+    test('should filter correctly', async () => {
+      const testCache = new MutationCache()
+      const testClient = createQueryClient({ mutationCache: testCache })
+      await executeMutation(testClient, {
+        mutationKey: ['a', 1],
+        variables: 1,
+        mutationFn: () => Promise.resolve(),
+      })
+      await executeMutation(testClient, {
+        mutationKey: ['a', 2],
+        variables: 2,
+        mutationFn: () => Promise.resolve(),
+      })
+      await executeMutation(testClient, {
+        mutationKey: ['b'],
+        mutationFn: () => Promise.resolve(),
+      })
+
+      const [mutation1, mutation2] = testCache.getAll()
+      expect(
+        testCache.findAll({ mutationKey: ['a'], exact: false }),
+      ).toHaveLength(2)
+      expect(testCache.find({ mutationKey: ['a', 1] })).toEqual(mutation1)
+      expect(testCache.findAll({ mutationKey: ['unknown'] })).toEqual([])
+      expect(
+        testCache.findAll({ predicate: (m) => m.options.variables === 2 }),
+      ).toEqual([mutation2])
+    })
+  })
+
+  describe('garbage collection', () => {
+    test('should remove unused mutations after cacheTime has elapsed', async () => {
+      const testCache = new MutationCache()
+      const testClient = createQueryClient({ mutationCache: testCache })
+      const onSuccess = jest.fn()
+      await executeMutation(testClient, {
+        mutationKey: ['a', 1],
+        variables: 1,
+        cacheTime: 10,
+        mutationFn: () => Promise.resolve(),
+        onSuccess,
+      })
+
+      expect(testCache.getAll()).toHaveLength(1)
+      await sleep(10)
+      await waitFor(() => {
+        expect(testCache.getAll()).toHaveLength(0)
+      })
+      expect(onSuccess).toHaveBeenCalledTimes(1)
+    })
+
+    test('should not remove mutations if there are active observers', async () => {
+      const queryClient = createQueryClient()
+      const observer = new MutationObserver(queryClient, {
+        variables: 1,
+        cacheTime: 10,
+        mutationFn: () => Promise.resolve(),
+      })
+      const unsubscribe = observer.subscribe(() => undefined)
+
+      expect(queryClient.getMutationCache().getAll()).toHaveLength(0)
+      observer.mutate(1)
+      expect(queryClient.getMutationCache().getAll()).toHaveLength(1)
+      await sleep(10)
+      expect(queryClient.getMutationCache().getAll()).toHaveLength(1)
+      unsubscribe()
+      expect(queryClient.getMutationCache().getAll()).toHaveLength(1)
+      await sleep(10)
+      await waitFor(() => {
+        expect(queryClient.getMutationCache().getAll()).toHaveLength(0)
+      })
+    })
+
+    test('should only remove when the last observer unsubscribes', async () => {
+      const queryClient = createQueryClient()
+      const observer1 = new MutationObserver(queryClient, {
+        variables: 1,
+        cacheTime: 10,
+        mutationFn: async () => {
+          await sleep(10)
+          return 'update1'
+        },
+      })
+
+      const observer2 = new MutationObserver(queryClient, {
+        cacheTime: 10,
+        mutationFn: async () => {
+          await sleep(10)
+          return 'update2'
+        },
+      })
+
+      await observer1.mutate()
+
+      // we currently have no way to add multiple observers to the same mutation
+      const currentMutation = observer1['currentMutation']!
+      currentMutation.addObserver(observer1)
+      currentMutation.addObserver(observer2)
+
+      expect(currentMutation['observers'].length).toEqual(2)
+      expect(queryClient.getMutationCache().getAll()).toHaveLength(1)
+
+      currentMutation.removeObserver(observer1)
+      currentMutation.removeObserver(observer2)
+      expect(currentMutation['observers'].length).toEqual(0)
+      expect(queryClient.getMutationCache().getAll()).toHaveLength(1)
+      // wait for cacheTime to gc
+      await sleep(10)
+      await waitFor(() => {
+        expect(queryClient.getMutationCache().getAll()).toHaveLength(0)
+      })
+    })
+
+    test('should be garbage collected later when unsubscribed and mutation is loading', async () => {
+      const queryClient = createQueryClient()
+      const onSuccess = jest.fn()
+      const observer = new MutationObserver(queryClient, {
+        variables: 1,
+        cacheTime: 10,
+        mutationFn: async () => {
+          await sleep(20)
+          return 'data'
+        },
+        onSuccess,
+      })
+      const unsubscribe = observer.subscribe(() => undefined)
+      observer.mutate(1)
+      unsubscribe()
+      expect(queryClient.getMutationCache().getAll()).toHaveLength(1)
+      await sleep(10)
+      // unsubscribe should not remove even though cacheTime has elapsed b/c mutation is still loading
+      expect(queryClient.getMutationCache().getAll()).toHaveLength(1)
+      await sleep(10)
+      // should be removed after an additional cacheTime wait
+      await waitFor(() => {
+        expect(queryClient.getMutationCache().getAll()).toHaveLength(0)
+      })
+      expect(onSuccess).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call callbacks even with cacheTime 0 and mutation still loading', async () => {
+      const queryClient = createQueryClient()
+      const onSuccess = jest.fn()
+      const observer = new MutationObserver(queryClient, {
+        variables: 1,
+        cacheTime: 0,
+        mutationFn: async () => {
+          return 'data'
+        },
+        onSuccess,
+      })
+      const unsubscribe = observer.subscribe(() => undefined)
+      observer.mutate(1)
+      unsubscribe()
+      await waitFor(() => {
+        expect(queryClient.getMutationCache().getAll()).toHaveLength(0)
+      })
+      expect(onSuccess).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/src/tests/mutationObserver.test.tsx

@@ -0,0 +1,75 @@
+import { waitFor } from '@testing-library/react'
+import { createQueryClient, sleep } from '../../../../tests/utils'
+import { QueryClient, MutationObserver } from '..'
+
+describe('mutationObserver', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = createQueryClient()
+    queryClient.mount()
+  })
+
+  afterEach(() => {
+    queryClient.clear()
+  })
+
+  test('onUnsubscribe should not remove the current mutation observer if there is still a subscription', async () => {
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: async (text: string) => {
+        await sleep(20)
+        return text
+      },
+    })
+
+    const subscription1Handler = jest.fn()
+    const subscription2Handler = jest.fn()
+
+    const unsubscribe1 = mutation.subscribe(subscription1Handler)
+    const unsubscribe2 = mutation.subscribe(subscription2Handler)
+
+    mutation.mutate()
+
+    unsubscribe1()
+
+    await waitFor(() => {
+      // 1 call: loading
+      expect(subscription1Handler).toBeCalledTimes(1)
+      // 2 calls: loading, success
+      expect(subscription2Handler).toBeCalledTimes(2)
+    })
+
+    // Clean-up
+    unsubscribe2()
+  })
+
+  test('should not notify listeners if options.listeners is set to false', async () => {
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: async (text: string) => {
+        await sleep(20)
+        return text
+      },
+    })
+
+    const subscriptionHandler = jest.fn()
+    const unsubscribe = mutation.subscribe(subscriptionHandler)
+    mutation.mutate()
+
+    await waitFor(() => {
+      // 2 calls: loading, success
+      expect(subscriptionHandler).toBeCalledTimes(2)
+    })
+    subscriptionHandler.mockReset()
+
+    // Force a notification with listeners set to false
+    // because there is no existing usage of notify with listeners set to false
+    mutation['notify']({ listeners: false })
+
+    await waitFor(() => {
+      // 0 call because no notification has been sent
+      expect(subscriptionHandler).toBeCalledTimes(0)
+    })
+
+    unsubscribe()
+  })
+})

package/src/tests/mutations.test.tsx

@@ -0,0 +1,363 @@
+import { QueryClient } from '..'
+import {
+  createQueryClient,
+  executeMutation,
+  queryKey,
+  sleep,
+} from '../../../../tests/utils'
+import { MutationState } from '../mutation'
+import { MutationObserver } from '../mutationObserver'
+
+describe('mutations', () => {
+  let queryClient: QueryClient
+
+  beforeEach(() => {
+    queryClient = createQueryClient()
+    queryClient.mount()
+  })
+
+  afterEach(() => {
+    queryClient.clear()
+  })
+
+  test('mutate should trigger a mutation', async () => {
+    const result = await executeMutation(queryClient, {
+      mutationFn: async (text: string) => text,
+      variables: 'todo',
+    })
+
+    expect(result).toBe(result)
+  })
+
+  test('mutate should accept null values', async () => {
+    let variables
+
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: async (vars: unknown) => {
+        variables = vars
+        return vars
+      },
+    })
+
+    mutation.mutate(null)
+
+    await sleep(10)
+
+    expect(variables).toBe(null)
+  })
+
+  test('setMutationDefaults should be able to set defaults', async () => {
+    const key = queryKey()
+
+    queryClient.setMutationDefaults(key, {
+      mutationFn: async (text: string) => text,
+    })
+
+    const result = await executeMutation(queryClient, {
+      mutationKey: key,
+      variables: 'todo',
+    })
+
+    expect(result).toBe(result)
+  })
+
+  test('mutation should set correct success states', async () => {
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: async (text: string) => {
+        await sleep(10)
+        return text
+      },
+      onMutate: (text) => text,
+      variables: 'todo',
+    })
+
+    expect(mutation.getCurrentResult()).toEqual({
+      context: undefined,
+      data: undefined,
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: true,
+      isLoading: false,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'idle',
+      variables: undefined,
+    })
+
+    const states: MutationState<string, unknown, string, string>[] = []
+
+    mutation.subscribe((state) => {
+      states.push(state)
+    })
+
+    mutation.mutate()
+
+    await sleep(0)
+
+    expect(states[0]).toEqual({
+      context: undefined,
+      data: undefined,
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: false,
+      isLoading: true,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await sleep(5)
+
+    expect(states[1]).toEqual({
+      context: 'todo',
+      data: undefined,
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: false,
+      isLoading: true,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await sleep(20)
+
+    expect(states[2]).toEqual({
+      context: 'todo',
+      data: 'todo',
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: false,
+      isLoading: false,
+      isPaused: false,
+      isSuccess: true,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'success',
+      variables: 'todo',
+    })
+  })
+
+  test('mutation should set correct error states', async () => {
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: async () => {
+        await sleep(20)
+        return Promise.reject('err')
+      },
+      onMutate: (text) => text,
+      variables: 'todo',
+      retry: 1,
+      retryDelay: 1,
+    })
+
+    const states: MutationState<string, unknown, string, string>[] = []
+
+    mutation.subscribe((state) => {
+      states.push(state)
+    })
+
+    mutation.mutate().catch(() => undefined)
+
+    await sleep(0)
+
+    expect(states[0]).toEqual({
+      context: undefined,
+      data: undefined,
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: false,
+      isLoading: true,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await sleep(10)
+
+    expect(states[1]).toEqual({
+      context: 'todo',
+      data: undefined,
+      error: null,
+      failureCount: 0,
+      isError: false,
+      isIdle: false,
+      isLoading: true,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await sleep(20)
+
+    expect(states[2]).toEqual({
+      context: 'todo',
+      data: undefined,
+      error: null,
+      failureCount: 1,
+      isError: false,
+      isIdle: false,
+      isLoading: true,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await sleep(30)
+
+    expect(states[3]).toEqual({
+      context: 'todo',
+      data: undefined,
+      error: 'err',
+      failureCount: 2,
+      isError: true,
+      isIdle: false,
+      isLoading: false,
+      isPaused: false,
+      isSuccess: false,
+      mutate: expect.any(Function),
+      reset: expect.any(Function),
+      status: 'error',
+      variables: 'todo',
+    })
+  })
+
+  test('should be able to restore a mutation', async () => {
+    const key = queryKey()
+
+    const onMutate = jest.fn()
+    const onSuccess = jest.fn()
+    const onSettled = jest.fn()
+
+    queryClient.setMutationDefaults(key, {
+      mutationFn: async (text: string) => text,
+      onMutate,
+      onSuccess,
+      onSettled,
+    })
+
+    const mutation = queryClient
+      .getMutationCache()
+      .build<string, unknown, string, string>(
+        queryClient,
+        {
+          mutationKey: key,
+        },
+        {
+          context: 'todo',
+          data: undefined,
+          error: null,
+          failureCount: 1,
+          isPaused: true,
+          status: 'loading',
+          variables: 'todo',
+        },
+      )
+
+    expect(mutation.state).toEqual({
+      context: 'todo',
+      data: undefined,
+      error: null,
+      failureCount: 1,
+      isPaused: true,
+      status: 'loading',
+      variables: 'todo',
+    })
+
+    await queryClient.resumePausedMutations()
+
+    expect(mutation.state).toEqual({
+      context: 'todo',
+      data: 'todo',
+      error: null,
+      failureCount: 1,
+      isPaused: false,
+      status: 'success',
+      variables: 'todo',
+    })
+
+    expect(onMutate).not.toHaveBeenCalled()
+    expect(onSuccess).toHaveBeenCalled()
+    expect(onSettled).toHaveBeenCalled()
+  })
+
+  test('setState should update the mutation state', async () => {
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: async () => {
+        return 'update'
+      },
+      onMutate: (text) => text,
+    })
+    await mutation.mutate()
+    expect(mutation.getCurrentResult().data).toEqual('update')
+
+    // Force setState usage
+    // because no use case has been found using mutation.setState
+    const currentMutation = mutation['currentMutation']
+    currentMutation?.setState({
+      context: undefined,
+      variables: undefined,
+      data: 'new',
+      error: undefined,
+      failureCount: 0,
+      isPaused: false,
+      status: 'success',
+    })
+
+    expect(mutation.getCurrentResult().data).toEqual('new')
+  })
+
+  test('addObserver should not add an existing observer', async () => {
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: async () => {
+        return 'update'
+      },
+      onMutate: (text) => text,
+    })
+    await mutation.mutate()
+
+    // Force addObserver usage to add an existing observer
+    // because no use case has been found
+    const currentMutation = mutation['currentMutation']!
+    expect(currentMutation['observers'].length).toEqual(1)
+    currentMutation.addObserver(mutation)
+
+    expect(currentMutation['observers'].length).toEqual(1)
+  })
+
+  test('mutate should throw an error if no mutationFn found', async () => {
+    const mutation = new MutationObserver(queryClient, {
+      mutationFn: undefined,
+      retry: false,
+    })
+
+    let error: any
+    try {
+      await mutation.mutate()
+    } catch (err) {
+      error = err
+    }
+    expect(error).toEqual('No mutationFn found')
+  })
+})