How to pass an argument in a React Query?

When using React Query for data fetching, passing parameters to queries is a very common requirement. This enables us to fetch different data based on varying parameters. React Query provides multiple approaches to pass parameters to query functions. I will detail several common methods with examples.

1. Direct Parameter Passing

When using hooks like useQuery or useInfiniteQuery, you can directly pass parameters as the second argument to the query function. For example, if we need to fetch user data based on a user ID, we can do the following:

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

function fetchUserById(userId) {
  return fetch(`https://api.example.com/users/${userId}`).then(res => res.json());
}

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;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
}

In this example, userId is passed directly as a parameter to the fetchUserById function.

2. Using Query Keys

The query key in React Query serves not only as an identifier for caching and updates but can also be passed as parameters to the query function. The query key can be an array containing multiple values, which are passed as parameters to the query function in sequence. For example:

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

function fetchUserById(userId) {
  return fetch(`https://api.example.com/users/${userId}`).then(res => res.json());
}

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery(['user', userId], fetchUserById);

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

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
}

Here, the fetchUserById function directly utilizes the userId from the query key.

3. Query Function Factory

When you need more complex parameter passing logic, you can use a query function factory. This is a function that returns a query function, which can be customized based on the parameters you provide. For example:

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

function fetchUser({ queryKey }) {
  const [, userId, includePosts] = queryKey;
  let url = `https://api.example.com/users/${userId}`;
  if (includePosts) url += '?include=posts';
  return fetch(url).then(res => res.json());
}

function UserProfile({ userId, includePosts }) {
  const queryKey = ['user', userId, includePosts];
  const { data, isLoading, error } = useQuery(queryKey, fetchUser);

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

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
      {data.posts && <div>{data.posts.map(post => <p key={post.id}>{post.title}</p>)}</div>}
    </div>
  );
}

In this example, we use a query key containing additional parameters and dynamically construct the request URL within the query function based on these parameters.

Summary

React Query offers flexible methods for passing parameters according to your needs. Whether passing directly in the useQuery hook or through query keys or query function factories, it enables convenient dynamic and customized parameter handling. This makes React Query a highly powerful tool for managing data fetching and state management.