How to handle server-side errors using react-query and formik?

使用React Query和Formik处理服务器端错误

在使用React Query和Formik时，处理服务器端错误是很常见的需求。这通常涉及到两个场景：一是在使用React Query进行数据获取及操作时，二是在使用Formik提交表单时。以下是对这两种情况处理服务器端错误的策略和实例。

1. React Query中处理服务器端错误

策略：

• 使用React Query的useQuery或useMutation时，可以通过onError回调来处理错误。
• 显示错误信息通常是通过状态管理来实现，比如设置一个错误状态，并在组件中显示该错误信息。

示例：

假设我们使用React Query来发送一个POST请求，并希望处理可能出现的服务器端错误。

javascript
import { useMutation } from 'react-query';

function submitData(data) {
  return fetch('/api/data', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json',
    },
  }).then(res => {
    if (!res.ok) {
      throw new Error('Server responded with an error!');
    }
    return res.json();
  });
}

function MyComponent() {
  const { mutate, isError, error } = useMutation(submitData, {
    onError: (err) => {
      // 处理错误，例如显示通知或日志记录
      console.error('Error submitting data:', err.message);
    },
  });

  const handleSubmit = (data) => {
    mutate(data);
  };

  return (
    <div>
      {isError && <p>Error: {error.message}</p>}
      <button onClick={() => handleSubmit({ name: 'John' })}>Submit</button>
    </div>
  );
}

2. Formik中处理服务器端错误

策略：

• 在Formik的onSubmit函数中，如果请求失败，可以利用Formik的setErrors方法来设置表单错误。
• 通常错误信息需要从服务器响应中解析得到，并设置到对应的表单字段上。

示例：

假设我们有一个表单，使用Formik进行管理，提交时需要处理服务器返回的错误信息。

javascript
import { Formik, Form, Field, ErrorMessage } from 'formik';

function MyForm() {
  const handleSubmit = (values, { setSubmitting, setErrors }) => {
    fetch('/api/form-submit', {
      method: 'POST',
      body: JSON.stringify(values),
      headers: {
        'Content-Type': 'application/json',
      },
    })
    .then(res => res.json())
    .then(data => {
      if (data.error) {
        setErrors({ submit: data.message });
      }
      setSubmitting(false);
    })
    .catch(error => {
      setErrors({ submit: 'An unexpected error occurred' });
      setSubmitting(false);
    });
  };

  return (
    <Formik
      initialValues={{ email: '' }}
      onSubmit={handleSubmit}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="email" name="email" />
          <ErrorMessage name="email" component="div" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
}

在这个例子中，如果服务器响应包含错误信息（例如用户提交的email已存在），我们设置这个错误信息到Formik的错误状态中，从而能够在表单中展示给用户。

总结

结合React Query和Formik处理服务器端错误涉及到了错误捕获、状态更新和用户反馈等多个方面。通过合理利用两者提供的API和功能，可以有效地管理和反馈服务器端的错误信息，提升用户体验和应用的健壮性。