javascript - Kan inte skicka några argument till mutate-funktionen i react-query med typescript

Jag försöker använda react-query och axios för att skicka en POST-förfrågan till backend för att registrera en användare, men när jag försöker trigga mutation med argument genom att klicka på knappen får jag ett fel.

import React from 'react'
import { useMutation } from '@tanstack/react-query'
import axios from 'axios'
import { Button } from 'react-bootstrap'

const RegisterScreen = () => {
  const { data, error, isLoading, mutate } = useMutation((user) =>
    axios.post('/api/users', user)
  )

  const user = { name: 'john', email: '[email ', password: '1234' }

  return (
    <div>
      <Button onClick={() => mutate(user)}>Register</Button>
    </div>
  )
}

export default RegisterScreen

Felmeddelande:

ERROR in src/screens/RegisterScreen.tsx:15:37
[1] TS2345: Argument of type '{ name: string; email: string; password: string; }' is not assignable to parameter of type 'void'.
[1]     13 |   return (
[1]     14 |     <div>
[1]   > 15 |       <Button onClick={() => mutate(user)}>Register</Button>
[1]        |                                     ^^^^
[1]     16 |     </div>
[1]     17 |   )
[1]     18 | }

Svar #1

Löst: jag var tvungen att lägga till typ till användarargumentet i mutate-funktionen:

const { data, error, isLoading, mutate } = useMutation(
    (user: { name: string; email: string; password: string }) =>
      axios.post('/api/users', user)
  )

Relaterade artiklar