在使用 React-Query 进行项目开发时，我们常常需要进行数据的提交和验证，以保证数据的合理性和完整性。但是在提交数据时，如果服务器端返回了错误信息，我们该如何在客户端进行处理呢？

这里提供一种解决方案：通过 onError 属性获取服务器端返回的错误信息，并将其转换为可读的格式后，直接展示给用户。

具体实现方法如下：

import { useMutation } from 'react-query';

const createUser = async (data) => {
  // 提交数据
  const response = await fetch('/api/user', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify(data),
  });

  // 处理服务器端返回的错误信息
  if (!response.ok) {
    const { errors } = await response.json();
    const message = Object.values(errors).flat().join('\n');
    throw new Error(message);
  }

  // 处理服务器端返回的成功数据
  return await response.json();
};

const UserForm = () => {
  const [data, setData] = useState({ name: '', email: '' });
  const [mutate, { error }] = useMutation(createUser);

  const handleSubmit = (event) => {
    event.preventDefault();

    mutate(data);
  };

  return (
    

       setData({ ...data, name: event.target.value })} />
       setData({ ...data, email: event.target.value })} />
      Create User

      {error && 
{error.message}
}
    
  );
};

以上就是将 “Access to server-side validation errors in react-query mutation” 。