为什么向react-query添加观察者会导致它忽略其“enabled”属性？

Question

更新：我现在已经将这个问题作为一个问题提交到了react-query的Github上，你应该在那里关注它。

我有一个非常简单的useQuery：

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

如果这是独立的那么没有问题。一切都会初始化，除非refreshable设置，true否则它会处于休眠状态。

然而，在同一个钩子中我添加了一个观察者......

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])

附加观察者会导致获取（以及失败和多次重试）发生enabled，而不管 ，我认为这不应该发生。

在我提出有关反应查询的问题之前，任何人都可以解释为什么会发生这种情况吗？

Answer 1

在底层，useQuery 使用您传递给它的选项创建一个 QueryObserver。因此，在 userQuery 之后，您将拥有一个启用的观察者： false，这将为您提供禁用的查询。

现在启用的是每个观察者的属性。启用一个 useQuery 实例，同时禁用另一个具有相同 queryKey 的实例是完全合法的。

这基本上就是您正在做的事情：当您手动创建新的 QueryObserver 时，您没有向其传递enabled: false，因此您创建了第二个启用的观察者，然后它将运行查询。

因此，传递refreshable给新的 Oberverenabled选项应该可以解决这个问题：

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