Feature request: idle timeout on useQuery.

[dwjohnston]

Scenario

We want to do a dependant query, and we'll use the technique suggested in the docs.

We're making a basic todo app, using the JSONPlaceholder API.

On our application when we navigate to /todos/1 we want to see the title of that todo, as well as the name of the user the user is assigned to.

In order to do this, we need to first fetch todos/1 and then use that response to fetch users/{someUserId}

Code

React Query code:

// I'm already uneasy about making userId optional, but lets continue
export function useUser(userId?: number) {
    return useQuery({
        queryFn: () => fetch(`https://jsonplaceholder.typicode.com/users/${userId}`).then((v) => v.json() as Promise<User>), 
        queryKey: ["users", userId], 
        enabled: !!userId
    }) 
}


export function useTodo(todoId: number) {
    return useQuery({
        queryFn: () => fetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`).then((v) => v.json()  as Promise<Todo>), 
        queryKey: ["todos", todoId]
    })
}

export function useUserForTodo(todoId: number) {
    const todoQuery = useTodo(todoId); 
    return useUser(todoQuery.data?.userId); 
}

Our component:

export const SingleTodoPage = (props: SingleTodoPageProps) => {
  const {  } = props;

  const {todoId} = useParams();

  if(!todoId){
    throw new Error("No todoId exists");
  }

  const todoQuery = useTodo(parseInt(todoId)); 
  const userQuery = useUserForTodo(parseInt(todoId));
  
  return (
    <div>
      {(todoQuery.isLoading || userQuery.isLoading) && <div>Loading...</div>}

      {todoQuery.data?.title}
      {userQuery.data?.username}
    </div>
  );
};

The Problem

Allowing userId to be undefined makes me uneasy because it's possible for a developer error to occur where userId will never exist.

As an example in this code, if we navigate to page /todos/111111111 we always see the loading flag.

The Request

Allow an optional notEnabledTimeout property, where if the query has not started within this time, the query reverts to an error state.

[TkDodo]

Allowing userId to be undefined makes me uneasy because it's possible for a developer error to occur where userId will never exist.

As an example in this code, if we navigate to page /todos/111111111 we always see the loading flag.

There are many ways around this issue. One would be to respect the status of the first query, e.g. if the userQuery goes into error state, you show an error state. Your useUserForTodo hook just doesn't do that.

This would achieve what your feature request would want. A timeout doesn't seem like a good fit because queries can take longer, can fail and then have retries etc. You usually can't know from a simple timeout that you have an error if the second query hasn't started in that time-frame.