When working with data in React applications, you often encounter situations where one piece of data depends on another. Dependent queries are a powerful feature in TanStack Query that allow you to fetch data only after certain conditions are met or prerequisite data has been retrieved. This pattern is especially useful when you need to chain requests, such as fetching user details only after obtaining a user ID, or retrieving order information once a product has been selected. Dependent queries help you avoid unnecessary network requests and ensure that your components only fetch data when it actually makes sense to do so.

Suppose you have a scenario where you want to display user details, but you first need to fetch the user ID—perhaps after a login or selection event. You can use TanStack Query's enabled option to control when the query should run. Here is a simple example that demonstrates this pattern:

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

function UserProfile({ userId }) {
  const { data: userDetails, isLoading } = useQuery({
    queryKey: ["userDetails", userId],
    queryFn: () =>
      fetch(`/api/users/${userId}`).then((res) => res.json()),
    enabled: !!userId, // Only run the query if userId exists
  });

  if (!userId) {
    return <div>Please select a user.</div>;
  }

  if (isLoading) {
    return <div>Loading user details...</div>;
  }

  return (
    <div>
      <h2>User Details</h2>
      <div>Name: {userDetails.name}</div>
      <div>Email: {userDetails.email}</div>
    </div>
  );
}

In this example, the useQuery hook for fetching user details is only enabled when the userId is available. This prevents the query from running with an undefined or null ID, which could lead to unnecessary errors or requests.

The ability to enable or disable queries based on dynamic conditions is a key feature of TanStack Query. By using the enabled option, you can precisely control when a query should execute. This is particularly important for dependent queries, as you often want to wait for some prerequisite data or event before making a request. For example, you might disable a query until a user selects an item, a form is submitted, or authentication is complete. Setting enabled: false ensures that the query does not run until your specified condition is met, giving you full control over your application's data fetching flow.