( options: UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, queryClient?: QueryClient, )
| 17 | // HOOK |
| 18 | |
| 19 | export function useMutation< |
| 20 | TData = unknown, |
| 21 | TError = DefaultError, |
| 22 | TVariables = void, |
| 23 | TOnMutateResult = unknown, |
| 24 | >( |
| 25 | options: UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, |
| 26 | queryClient?: QueryClient, |
| 27 | ): UseMutationResult<TData, TError, TVariables, TOnMutateResult> { |
| 28 | const client = useQueryClient(queryClient) |
| 29 | |
| 30 | const [observer] = React.useState( |
| 31 | () => |
| 32 | new MutationObserver<TData, TError, TVariables, TOnMutateResult>( |
| 33 | client, |
| 34 | options, |
| 35 | ), |
| 36 | ) |
| 37 | |
| 38 | React.useEffect(() => { |
| 39 | observer.setOptions(options) |
| 40 | }, [observer, options]) |
| 41 | |
| 42 | const result = React.useSyncExternalStore( |
| 43 | React.useCallback( |
| 44 | (onStoreChange) => |
| 45 | observer.subscribe(notifyManager.batchCalls(onStoreChange)), |
| 46 | [observer], |
| 47 | ), |
| 48 | () => observer.getCurrentResult(), |
| 49 | () => observer.getCurrentResult(), |
| 50 | ) |
| 51 | |
| 52 | const mutate = React.useCallback< |
| 53 | UseMutateFunction<TData, TError, TVariables, TOnMutateResult> |
| 54 | >( |
| 55 | (variables, mutateOptions) => { |
| 56 | observer.mutate(variables, mutateOptions).catch(noop) |
| 57 | }, |
| 58 | [observer], |
| 59 | ) |
| 60 | |
| 61 | if ( |
| 62 | result.error && |
| 63 | shouldThrowError(observer.options.throwOnError, [result.error]) |
| 64 | ) { |
| 65 | throw result.error |
| 66 | } |
| 67 | |
| 68 | return { ...result, mutate, mutateAsync: result.mutate } |
| 69 | } |
searching dependent graphs…