React Query – enabled option
If you're new to react-query you should definitely head there first to learn more. Then come back!
This short article focuses on one very specific configuration option to the useQuery hook called enabled. This option can be set to anything that resolves to a boolean, and, when false, will prevent the query from firing. This is especially useful when you need to handle dependent (waterfall) queries or wait for user input.
Breaking Down the Code
Again, this is not an article about how to use react-query, so we aren't going to cover the first two arguments to the useQuery hook. This article is about the 3rd, optional argument to useQuery; the options argument. Specificially the enabled option.
const options = { enabled: isEnabled }const query = useQuery(key, fetchFunction, options)
There's not much to it, really, and that's what's so amazing about the enabled option. In the example above, useQuery will not call fetchFunction unless isEnabled resolves to true.
This allows you to write the useQuery hook as if it were always going to call fetchFunction instead of writing additional code to prevent useQuery from running at all. So, the next time you need to prevent useQuery from running until a condition is met, give the enabled option a try.