为什么添加一个观察者来响应-查询会导致它忽略它的“使能”属性？

Question

那里.更新:我现在已经将其作为一个问题提交给react的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传递给新的Oberver的enabled选项应该可以解决这个问题：

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