# React Query - Enable Query

> Hey folks, Do you know that you can enable or disable a query in react query? Noooo! Ok, it's time to...

- **Author**: Luca Del Puppo (@puppo92) — AI Native Engineer at Nearform
- **Published**: Apr 26, 2023
- **Canonical URL**: https://delpuppo.net/blog/react-query/react-query-enable-query/
- **Series**: React Query (Part 7 of 12) — https://delpuppo.net/blog/series/react-query/
- **Series LLMs.txt**: https://delpuppo.net/blog/series/react-query/llms.txt
- **Category**: React Query
- **Tags**: react, reactquery, reacthooks
- **Hashnode Mirror**: https://blog.delpuppo.net/react-query-enable-query
- **Dev.to Mirror**: https://dev.to/playfulprogramming/react-query-enable-query-hj5
- **Blog Index LLMs.txt**: https://delpuppo.net/blog/llms.txt

## Series Context: React Query

- Part 1: [React Query - useQuery](https://delpuppo.net/blog/react-query/react-query-usequery/)
- Part 2: [React Query - useMutation](https://delpuppo.net/blog/react-query/react-query-usemutation/)
- Part 3: [React Query - useIsFetching & useIsMutation](https://delpuppo.net/blog/react-query/react-query-useisfetching-useismutation/)
- Part 4: [React Query - DevTools](https://delpuppo.net/blog/react-query/react-query-devtools/)
- Part 5: [React Query - Authentication Flow](https://delpuppo.net/blog/react-query/react-query-authentication-flow/)
- Part 6: [React Query - Filter Your Data](https://delpuppo.net/blog/react-query/react-query-filter-your-data/)
- Part 7: [React Query - Enable Query](https://delpuppo.net/blog/react-query/react-query-enable-query/) **(Current Article)**
- Part 8: [React Query - Keys & Prefetching](https://delpuppo.net/blog/react-query/react-query-keys-prefetching/)
- Part 9: [Improve user experience with optimistic update](https://delpuppo.net/blog/react-query/improve-user-experience-with-optimistic-update/)
- Part 10: [React Query - Abort Request](https://delpuppo.net/blog/react-query/react-query-abort-request/)
- Part 11: [React Query - Paginated List](https://delpuppo.net/blog/react-query/react-query-paginated-list/)
- Part 12: [React Query - Infinite Queries](https://delpuppo.net/blog/react-query/react-query-infinite-queries/)

---

Hey folks,  
Do you know that you can enable or disable a query in react query? Noooo! Ok, it's time to learn it!

Some specific hooks must be enabled only if there are some data in the application; for instance, some queries must run only if the users are logged in.  
To solve this problem, the `useQuery` hooks accept an option called `enabled` that accepts a boolean to determine if a condition is true or false.  
Let's take a look at this example

```ts
import { useQuery } from '@tanstack/react-query';
import { QUERY_KEY } from 'src/app/constants/queryKeys';
import { Todo } from 'src/app/models';
import { User, useUser } from '../../../../auth/useUser';
import { ResponseError } from '../../../../utils/Errors/ResponseError';

const fetchTodos = async (user: User): Promise<Todo[]> => {
  const response = await fetch(`api/tasks?assigneeId=${user.user.id}`, {
    headers: {
      Authorization: `Bearer ${user.accessToken}`,
    },
  });
  if (!response.ok) {
    throw new ResponseError('Failed to fetch my todos', response);
  }
  return await response.json();
};

interface UseMyTodos {
  todos: Todo[];
  error?: string;
}

function mapError(error: unknown | undefined): undefined | string {
  if (!error) return undefined;
  if (error instanceof ResponseError) return error.response.statusText;
  if (error instanceof Error) return error.message;
  return 'Unknown error';
}

export const useMyTodos = (): UseMyTodos => {
  const { user } = useUser();

  const { data: todos = [], error } = useQuery(
    [QUERY_KEY.myTodos],
    () => fetchTodos(user!),
    {
      refetchOnWindowFocus: false,
      retry: 2,
      enabled: !!user,
    }
  );

  return {
    todos,
    error: mapError(error),
  };
};
```

As you can notice, in this case, a custom hook calls the API and gets all the todos assigned to the current users.  
The key point of this example stands in the enabled option. As you can see, this `useQuery` is called only if there is a user; else, the query is stopped.  
This feature permits developers to be sure to call a specific API only if a condition is satisfied, preventing a bad API request.  
This feature is pretty simple but very powerful, as you can imagine!

To find out more about the `enabled` option take a look at my youtube video about it


> 🎬 **Watch / View Embedded Resource:** [https://www.youtube.com/watch?v=5JSD_b2slJs](https://www.youtube.com/watch?v=5JSD_b2slJs)


Ok, that's all from the enabled option.

I hope you enjoyed this content!

See you soon folks

Bye Bye 👋

p.s. you can find the code of the video [in the GitHub repository](https://github.com/Puppo/learning-react-query/tree/07-enable-query)

_Photo by [Rahul Mishra](https://unsplash.com/@rahuulmiishra?utm_source=Devto&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=devto&utm_medium=referral)_


> 🎬 **Watch / View Embedded Resource:** [https://dev.to/puppo](https://dev.to/puppo)