Disabling/Pausing Queries

If you ever want to disable a query from automatically running, you can use the enabled = false option.

When enabled is false:

• If the query has cached data
  • The query will be initialized in the status === 'success' or isSuccess state.
• If the query does not have cached data
  • The query will start in the status === 'idle' or isIdle state.
• The query will not automatically fetch on mount.
• The query will not automatically refetch in the background when new instances mount or new instances appearing
• The query will ignore query client invalidateQueries and refetchQueries calls that would normally result in the query refetching.
• refetch can be used to manually trigger the query to fetch.

1 function Todos() {
2   const {
3     isIdle,
4     isLoading,
5     isError,
6     data,
7     error,
8     refetch,
9     isFetching,
10   } = useQuery(['todos'], fetchTodoList, {
11     enabled: false,
12   })
13 
14   return (
15     <>
16       <button onClick={() => refetch()}>Fetch Todos</button>
17 
18       {isIdle ? (
19         'Not ready...'
20       ) : isLoading ? (
21         <span>Loading...</span>
22       ) : isError ? (
23         <span>Error: {error.message}</span>
24       ) : (
25         <>
26           <ul>
27             {data.map(todo => (
28               <li key={todo.id}>{todo.title}</li>
29             ))}
30           </ul>
31           <div>{isFetching ? 'Fetching...' : null}</div>
32         </>
33       )}
34     </>
35   )
36 }