Custom hook to log request and errors while using either useQuery or useMutation?

Custom Hook to Log Request and Errors while using either useQuery or useMutation?

When working with TypeScript and using popular libraries like React Query, you might come across situations where you need to log requests and errors for debugging purposes. In this blog post, we will explore how to create a custom hook that can be used with both the useQuery and useMutation hooks to log requests and errors.

Creating the Custom Hook

First, let’s create a custom hook called useLoggedQuery that wraps around the useQuery hook. This custom hook will log the request and any errors that occur during the query.

import { useQuery } from 'react-query';

const useLoggedQuery = (key, queryFn, options) => {
  const query = useQuery(key, queryFn, options);

  useEffect(() => {
    console.log('Request:', key);
    
    if (query.isError) {
      console.error('Error:', query.error);
    }
  }, [key, query.isError, query.error]);

  return query;
};

export default useLoggedQuery;
  

The useLoggedQuery hook takes three parameters: key, queryFn, and options. The key is a unique identifier for the query, queryFn is the function that performs the actual query, and options are the additional options for the useQuery hook.

Inside the useLoggedQuery hook, we use the useEffect hook to log the request and any errors that occur. The useEffect hook will be triggered whenever the key, query.isError, or query.error changes.

Using the Custom Hook

Now, let’s see how we can use the useLoggedQuery hook in our components.

import { useLoggedQuery } from './useLoggedQuery';

const MyComponent = () => {
  const { data, isLoading, isError } = useLoggedQuery('myQuery', fetchMyData);

  if (isLoading) {
    return 
Loading...
;
  }

  if (isError) {
    return 
Error occurred while fetching data.
;
  }

  return (
    

      {/* Render the data */}
    
  );
};

export default MyComponent;
  

In the above example, we import and use the useLoggedQuery hook instead of the useQuery hook. We pass the key ‘myQuery’ and the fetchMyData function as parameters to the useLoggedQuery hook. The useLoggedQuery hook will handle logging the request and errors, and we can access the data, isLoading, and isError properties from the returned query object.

Using the Custom Hook with useMutation

If you want to log requests and errors while using the useMutation hook, you can create a similar custom hook called useLoggedMutation.

import { useMutation } from 'react-query';

const useLoggedMutation = (mutationFn, options) => {
  const mutation = useMutation(mutationFn, options);

  useEffect(() => {
    console.log('Request:', mutationFn.name);
    
    if (mutation.isError) {
      console.error('Error:', mutation.error);
    }
  }, [mutationFn.name, mutation.isError, mutation.error]);

  return mutation;
};

export default useLoggedMutation;
  

The useLoggedMutation hook is similar to the useLoggedQuery hook, but it wraps around the useMutation hook instead. It logs the request and any errors that occur during the mutation.

Now, you can use the useLoggedMutation hook in your components to log requests and errors while using the useMutation hook.

Conclusion

Creating custom hooks like useLoggedQuery and useLoggedMutation can be useful when you need to log requests and errors while using the useQuery and useMutation hooks in TypeScript. These hooks provide a convenient way to debug and monitor your application’s network requests.