React-query - What's the difference between useQuery and useMutation hook?

useQuery and useMutation

React Query is a powerful library for handling data fetching, caching, synchronization, and updates within React applications. In React Query, useQuery and useMutation are two core hooks that handle data in different ways and for distinct purposes.

useQuery

Definition and Purpose: useQuery is primarily used for asynchronously fetching data and caching it locally. When a component needs to fetch remote data, useQuery is typically employed. It is ideal for handling GET requests to fetch and display data.

Features:

• Automatically caches and updates data.
• Provides data state management, including isLoading, isError, and data.
• Supports scheduled data refreshes and refreshes when the window is focused.

Example: Suppose we need to fetch a user list from an API; we can use useQuery as follows:

javascript
const { data, error, isLoading } = useQuery('users', fetchUsers);

Here, fetchUsers is an asynchronous function used to send a GET request to fetch user data.

useMutation

Definition and Purpose: useMutation is used for executing operations that modify data, such as POST, PUT, PATCH, or DELETE requests. This hook primarily handles operations that change server data, and these operations typically do not require immediate UI updates.

Features:

• Used for creating, updating, or deleting data.
• Provides mutation state management, including isLoading, isError, and isSuccess.
• Supports callback functions like onSuccess, onError, and onSettled, enabling specific actions to be performed after the operation.

Example: Suppose we need to add a new user; we can use useMutation as follows:

javascript
const mutation = useMutation(addUser, {
    onSuccess: () => {
        // For example, refetch the user list after successful addition
        queryClient.invalidateQueries('users')
    }
});

// Invoke the mutation
mutation.mutate({name: "New User", age: 30});

Here, addUser is a function that sends a POST request to create a new user.

Summary

In summary, useQuery is suitable for scenarios where data is fetched and displayed, while useMutation is used for operations that modify data without immediate UI concerns. Using these two hooks effectively manages data state and caching, optimizing the performance and user experience of React applications.