How to fetch with parameters using React Query?

In React Query, when we need to make a request and pass parameters, we commonly use the useQuery or useMutation hooks. Below, I will explain how to pass parameters in both scenarios.

Using useQuery

In useQuery, parameters can be passed through the parameters of the query function. Typically, this query function is defined by you to fetch data from the server.

For example, suppose we want to fetch some user data from an API, where the API endpoint accepts userId as a parameter to retrieve specific user information:

javascript
import { useQuery } from 'react-query';
import axios from 'axios';

// Define a function to fetch user data, which accepts a userId parameter
const fetchUserById = async (userId) => {
  const { data } = await axios.get(`/api/users/${userId}`);
  return data;
};

// Use useQuery in a component, passing the userId parameter
function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery(['user', userId], () => fetchUserById(userId));

  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;

  // Render user data...
}

Note that in the above example, the first parameter of useQuery is an array containing a string 'user' and the variable userId. This array is referred to as the query key in React Query and is used to uniquely identify and cache the query.

Using useMutation

useMutation is typically used for operations such as POST, PUT, DELETE that modify the server state. Parameters are usually passed when triggering the mutation.

For example, if we want to add a new user, we might have a useMutation to handle this POST request:

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

// Define a function to add a user, which accepts a user object as a parameter
const addUser = async (user) => {
  const { data } = await axios.post('/api/users', user);
  return data;
};

function CreateUserForm() {
  // Use useMutation
  const mutation = useMutation(addUser);

  const handleSubmit = async (event) => {
    event.preventDefault();
    const user = {
      name: 'New User',
      email: 'newuser@example.com',
    };

    // Call the mutation, passing the user as a parameter
    mutation.mutate(user);
  };

  // Render different UI based on the mutation state
  if (mutation.isLoading) {
    return 'Adding user...';
  }

  if (mutation.isError) {
    return `An error occurred: ${mutation.error.message}`;
  }

  if (mutation.isSuccess) {
    return 'User added!';
  }

  // Render the form...
}

In the above example, we define a handleSubmit function that is triggered when the user submits the form. This function calls the addUser function via mutation.mutate(user) and passes the user object as a parameter. React Query handles sending the request and updating the state (such as isLoading, isError, and isSuccess).

Overall, whether using useQuery or useMutation, React Query provides a very flexible way to pass request parameters and handles many complexities related to request state management.