Adding an observer to a query causes it to ignore its `enabled` prop

[thclark]

Describe the bug

Adding an observer to a query causes it to ignore its enabled prop.

Initially asked here, it's had no answers and one upvote so I'm beginning to suspect it's not just me being dumb.

To Reproduce

I took a pretty straightforward query:

const refreshable = false // hard coded for the sake of example
const tokenQuery = useQuery('refresh-token', whateverQueryFn, {
  enabled: refreshable,
  refetchInterval: 1000 * 30,
  refetchIntervalInBackground: true,
})

If this is stand-alone then no problems. Everything initialises, and unless refreshable is set true then it lies dormant. However, in the same hook if you then add an observer...

useEffect(() => {
  // Create an observer to watch the query and update its result into state
  const observer = new QueryObserver(queryClient, {
    queryKey: 'refresh-token',
  })
  const unsubscribe = observer.subscribe((queryResult) => {
    console.log(
      'Do something with the token!'
      queryResult.data
    )
  })

  // Clean up the subscription when the component unmounts
  return () => {
    unsubscribe()
  }
}, [token, queryClient])

Attaching the observer causes a fetch (and failure, and multiple retries) to happen irrespective of the value of enabled.

Expected behavior
I think an observed query should respect the value of the enabled parameter.

Screenshots
n/a

Desktop (please complete the following information):

• OS: OSX
• Browser: Chrome
• Version: 91.0.4472.164 (Official Build) (arm64)

[TkDodo]

Sorry, I must've missed the stackoverflow question.

under the hood, useQuery creates a QueryObserver with the options you pass to it. So after the userQuery, you'll have one observer with enabled: false, which will give you a disabled query.

Now enabled is a per-observer property. It is totally legit to have one useQuery instance that is enabled while having another with the same queryKey that is disabled.

And this is basically what you are doing: When you manually create the new QueryObserver, you are not passing enabled: false to it, so you create a second observer that is enabled, which will then run the query.

[thclark]

Aha! So...

  const observer = new QueryObserver(queryClient, {
    queryKey: 'refresh-token',
    enabled: refreshable,
  })

..will fix this issue straight out of the box.

I thought it was probably me misunderstanding, this library is so beautifully engineered! Thanks @TkDodo - if you care about SO rep then feel free to post that answer on there, if not, I can do so so that others find it quickly!

😄

[TkDodo]

..will fix this issue straight out of the box.

exactly.

yep, I'll answer on SO as well. please close this issue if it's solved for you :)