T
TanStack•2y ago
absent-sapphire

useMutation Error and Type Safe

Please Help!!! I have tried many tricks to make this work but the error keeps coming 
export const formSchema = z
  .object({
    email: z
      .string({
        required_error: 'Email is required',
        invalid_type_error: 'Name must be a string'
      })
      .email({ message: 'Please Provide a valid email' }),
    firstName: z.string().min(3, { message: 'First Name Must be valid' }),
  })
  .required()

// Since the function does not return any data it is void
export async function createClient(
  values: z.infer<typeof formSchema>
): Promise<void> {
  return await api.post('/client', values)
}

const { mutate } = useMutation(createClient, { // Type '(values: { email: string; firstName: string;}) => Promise<void>' has no properties in common with type 'UseMutationOptions<unknown, Error, void, unknown>'.ts(2559)
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['clients'] })
  }
})

const onSubmit = async (values: z.infer<typeof formSchema>) => {
  await mutate(values) // Argument of type '{ email: string; firstName: string;}' is not assignable to parameter of type 'void'.
}
export const formSchema = z
  .object({
    email: z
      .string({
        required_error: 'Email is required',
        invalid_type_error: 'Name must be a string'
      })
      .email({ message: 'Please Provide a valid email' }),
    firstName: z.string().min(3, { message: 'First Name Must be valid' }),
  })
  .required()

// Since the function does not return any data it is void
export async function createClient(
  values: z.infer<typeof formSchema>
): Promise<void> {
  return await api.post('/client', values)
}

const { mutate } = useMutation(createClient, { // Type '(values: { email: string; firstName: string;}) => Promise<void>' has no properties in common with type 'UseMutationOptions<unknown, Error, void, unknown>'.ts(2559)
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['clients'] })
  }
})

const onSubmit = async (values: z.infer<typeof formSchema>) => {
  await mutate(values) // Argument of type '{ email: string; firstName: string;}' is not assignable to parameter of type 'void'.
}
2 Replies
other-emerald
other-emerald•2y ago
are you maybe in the wrong channel? should this have been posted into #react-query-questions ? but I think the issue is you need to pass in a single object into useMutation: 
const { mutate } = useMutation(
{
  mutationFn: createClient,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['clients'] })
  }
}
)
const { mutate } = useMutation(
{
  mutationFn: createClient,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['clients'] })
  }
}
)
absent-sapphire
absent-sapphireOP•2y ago
resolved Thanks

Did you find this page helpful?