feat(react-query): backport mutationOptions (#10368)

Author: manudeli

.changeset/icy-cities-speak.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/react-query': minor
+---
+
+feat(react-query): backport mutationOptions in v4

packages/react-query/src/__tests__/mutationOptions.test.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react'
+import { QueryClient } from '@tanstack/query-core'
+import { fireEvent, waitFor } from '@testing-library/react'
+import { mutationOptions } from '../mutationOptions'
+import { useIsMutating, useMutation } from '..'
+import { renderWithClient, sleep } from './utils'
+import type { UseMutationOptions } from '../types'
+
+describe('mutationOptions', () => {
+  it('should return the object received as a parameter without any modification (with mutationKey)', () => {
+    const object: UseMutationOptions = {
+      mutationKey: ['key'],
+      mutationFn: () => Promise.resolve(5),
+    } as const
+
+    expect(mutationOptions(object)).toBe(object)
+  })
+
+  it('should return the object received as a parameter without any modification (without mutationKey)', () => {
+    const object: UseMutationOptions = {
+      mutationFn: () => Promise.resolve(5),
+    } as const
+
+    expect(mutationOptions(object)).toBe(object)
+  })
+
+  it('should work with useMutation (with mutationKey)', async () => {
+    const queryClient = new QueryClient()
+    const mutationOpts = mutationOptions({
+      mutationKey: ['key'],
+      mutationFn: () => sleep(10).then(() => 'data'),
+    })
+
+    function Page() {
+      const mutation = useMutation(mutationOpts)
+
+      return (
+        <div>
+          <button onClick={() => mutation.mutate()}>mutate</button>
+          <span>{mutation.data ?? 'empty'}</span>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    expect(rendered.getByText('empty')).toBeTruthy()
+    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
+    await waitFor(() => rendered.getByText('data'))
+  })
+
+  it('should work with useMutation (without mutationKey)', async () => {
+    const queryClient = new QueryClient()
+    const mutationOpts = mutationOptions({
+      mutationFn: () => sleep(10).then(() => 'data'),
+    })
+
+    function Page() {
+      const mutation = useMutation(mutationOpts)
+
+      return (
+        <div>
+          <button onClick={() => mutation.mutate()}>mutate</button>
+          <span>{mutation.data ?? 'empty'}</span>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    expect(rendered.getByText('empty')).toBeTruthy()
+    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
+    await waitFor(() => rendered.getByText('data'))
+  })
+
+  it('should work with useIsMutating filtering by mutationKey', async () => {
+    const queryClient = new QueryClient()
+    const mutationOpts1 = mutationOptions({
+      mutationKey: ['key1'],
+      mutationFn: () => sleep(50).then(() => 'data1'),
+    })
+    const mutationOpts2 = mutationOptions({
+      mutationKey: ['key2'],
+      mutationFn: () => sleep(50).then(() => 'data2'),
+    })
+
+    function Page() {
+      const isMutating = useIsMutating({
+        mutationKey: mutationOpts1.mutationKey,
+      })
+      const { mutate: mutate1 } = useMutation(mutationOpts1)
+      const { mutate: mutate2 } = useMutation(mutationOpts2)
+
+      return (
+        <div>
+          <span>isMutating: {isMutating}</span>
+          <button onClick={() => mutate1()}>mutate1</button>
+          <button onClick={() => mutate2()}>mutate2</button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    rendered.getByText('isMutating: 0')
+    fireEvent.click(rendered.getByRole('button', { name: /mutate1/i }))
+    fireEvent.click(rendered.getByRole('button', { name: /mutate2/i }))
+    await waitFor(() => rendered.getByText('isMutating: 1'))
+    await waitFor(() => rendered.getByText('isMutating: 0'))
+  })
+
+  it('should work with queryClient.isMutating', async () => {
+    const queryClient = new QueryClient()
+    const mutationOpts = mutationOptions({
+      mutationKey: ['mutation'],
+      mutationFn: () => sleep(10).then(() => 'data'),
+    })
+
+    function Page() {
+      const isMutating = queryClient.isMutating({
+        mutationKey: mutationOpts.mutationKey,
+      })
+      const { mutate } = useMutation(mutationOpts)
+
+      return (
+        <div>
+          <span>isMutating: {isMutating}</span>
+          <button onClick={() => mutate()}>mutate</button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    rendered.getByText('isMutating: 0')
+    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
+    await waitFor(() => rendered.getByText('isMutating: 1'))
+    await waitFor(() => rendered.getByText('isMutating: 0'))
+  })
+})