What 's the type of React Query's Error ？

React Query primarily handles two types of errors:

1. Query Errors: These errors occur when there is a problem while attempting to fetch data from the server. For example, the server may return an error response (such as 404 or 500 status codes), or the network request may fail (e.g., due to a network disconnection). React Query captures these errors and provides them to developers via the status and error properties, enabling them to display error messages or implement other error-handling logic based on this information.

   Example: Suppose we are using React Query to fetch user information, but the server returns a 404 error. In this case, React Query sets the query's status property to 'error' and stores the specific error message in the error property. Developers can then display an error message based on this information, such as 'User information not found'.

   javascript
   const { data, error, status } = useQuery('user', fetchUser);
   
   if (status === 'error') {
     return <div>Error fetching user: {error.message}</div>;
   }

2. Mutation Errors: Mutation errors occur when there is a problem while executing data modifications or other operations that affect the server state (e.g., POST, PUT, DELETE requests). This also includes network issues or server error responses similar to query errors.

   Example: If we attempt to update user data (e.g., via a POST request), and the server fails to process the request due to internal errors, React Query's mutation hooks (such as useMutation) capture and provide this error information.

   javascript
   const mutation = useMutation(updateUser, {
     onError: (error) => {
       alert(`Update failed: ${error.message}`);
     },
   });
   
   if (mutation.isError) {
     return <div>Error updating user: {mutation.error.message}</div>;
   }

When handling these errors, React Query provides various error-handling options and hooks, allowing developers to flexibly implement error handling based on application requirements. By using the onError callback of useQuery and useMutation, developers can customize error-handling logic, such as displaying error messages, logging errors, or triggering other auxiliary processes. This flexibility is one of the reasons why React Query is widely popular in modern frontend development.