Use skipToken for type-safe query disabling in TanStack Query

When using useQuery, you may want to disable fetching until a condition is met. While enabled: false works, it doesn't narrow types inside your queryFn—TypeScript still sees the parameter as possibly undefined.

For a type-safe alternative, use skipToken:

import { useQuery, skipToken } from '@tanstack/react-query';
 
function Todos() {
  const [filter, setFilter] = React.useState<string | undefined>();
 
  const { data } = useQuery({
    queryKey: ['todos', filter],
    // Type-safe: skip query when `filter` is undefined
    queryFn: filter ? () => fetchTodos(filter) : skipToken,
  });
 
  return (
    <div>
      <FiltersForm onApply={setFilter} />
      {data && <TodosTable data={data} />}
    </div>
  );
}