When working with data in React applications, you often encounter situations where you need to fetch data that depends on the result of another query or on dynamic input, such as user selection. These scenarios are known as dependent queries. React Query provides a straightforward way to handle dependent queries using the enabled option in the useQuery hook. By controlling the enabled property, you can ensure that a query only runs when certain conditions are met, such as when a required value from a previous query is available.

The enabled option is a boolean that determines whether the query should automatically run. If you set enabled to false, the query will not execute until the condition becomes true. This is particularly useful when you need to wait for information from another query or from user input before fetching additional data.

Suppose you want to fetch details for a selected user, but you should only fetch the details after the user has been selected. You can use the enabled option to ensure that the query for user details only runs when the userId is available. Here is how you might structure this logic:

import { useQuery } from "@tanstack/react-query";
import { useState } from "react";

// First, fetch a list of users
const { data: users } = useQuery({
  queryKey: ["users"],
  queryFn: fetchUsers,
});

// Suppose the user selects a user from the list
const [selectedUserId, setSelectedUserId] = useState(null);

// Fetch details for the selected user, but only if a user is selected
const { data: userDetails } = useQuery({
  queryKey: ["userDetails", selectedUserId],
  queryFn: () => fetchUserDetails(selectedUserId),
  enabled: !!selectedUserId, // only run if selectedUserId is truthy
});

In this example, the userDetails query will only execute when selectedUserId is not null or undefined. This pattern allows you to build flexible, efficient data-fetching flows that respond to user actions or the results of other queries.