QueryClient should support a timeout option

[alexgleason]

I read this already, but the queryFn passes an AbortSignal now, which is the standard way to do cancellation of async functions.

In my hooks, I am doing slightly cursed things like this a lot:

function useAuthor(id: string) {
  const api = useApi();

  return useQuery({
    queryKey: ['author', id],
    queryFn: async ({ signal }) => {
      const signal = AbortSignal.any([signal, AbortSignal.timeout(1000)]); // 😩
      return api.getAuthor(id, { signal });
    }
  }
}

What I want to be doing is this:

// App.tsx
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      timeout: 1000,
    },
  },
});

// hooks/useAuthor.ts
function useAuthor(id: string) {
  const api = useApi();

  return useQuery({
    queryKey: ['author', id],
    queryFn: (c) => api.getAuthor(id, c), // 👍
  }
}

I just want it to do the AbortSignal.any automatically, and pass me an AbortSignal instance that already has the timeout on it.

[TkDodo]

both AbortSignal.any and AbortSignal.timeout are quite new features that aren’t available in all environments we currently support.

[alexgleason]

On the QueryClient side, it can be a setTimeout that aborts the controller (it's just syntactic sugar for that anyway). I wanted to bring up the idea because I hadn't seen anyone mentioning it before. What you said in the StackOverflow is still true. But now useQuery passes a signal, and nearly everything you'd want to abort can also accept a signal, so it seems like it naturally wants to be used that way. I think it's currently a "component is unmounting" signal, but it could be a "you can stop fetching now" signal.

[TkDodo]

fyi, you can always call queryClient.cancelQueries() to trigger cancellation and thus the signal.